Я думаю, что это выполнимо без JQuery. Основной проблемой является учет переменной высоты элементов.
ссылка здесь: http://jsfiddle.net/uqZgt/1/
HTML:
<div class="container">
<div class="box-1">
This box has alot of content. This box has alot of content. This box has alot of content.
</div>
<div class="box-2">
This box has a little bit of content. This box has a little bit of content. This box has a little bit of content. This box has alot of content. This box has alot of content. This box has alot of content.
</div>
</div>
CSS:
.container {
width: 242px;
}
.container div {
width: 100px;
background: #ff0000;
float: left;
padding: 10px;
border-right: 2px solid #000
}
.box-1 + .box-2 {
border-right: none;
border-left: 2px solid #000
}
.box-1 ~ .box-2 {
margin-left: -2px
}
в этом примере, все дивы в .container
DIV имеют 2px твердую черную кайму-вправо. Однако элемент с классом box-2
, который непосредственно передает элемент с .box-1
, будет иметь черный 2px border-left и no border-right. Пока это создает границу 3px между двумя элементами.
Теперь .box-1 ~ .box-2
выбирает любой .box-1
, который непосредственно предшествует .box-2
, и устанавливает его по левому краю на -2px. Это перетаскивает его брата из двух пикселей влево, что фактически перекрывает границы обоих элементов.
.container
DIV имеет ширину, равную сумме ширины двух элементов (200px), плюс дополнения (10px справа и слева = 20px) плюс ширина одного границ (2px). 242px, поэтому два элемента идеально подходят.
Независимо от того, какой div имеет больше контента, граница будет отображаться в высоту div с наибольшим количеством контента.
Любая простая ссылка на код http://jsfiddle.net/? Или изображение для чего вы хотите? – Giberno
Я второй запрос на jsfiddle этого, облегчил бы его понять и решить. – Jassi