Получение большего из двух div'ов, плавающих рядом, чтобы расширить его границу?

Question

У меня есть два <div> с, которые выглядят так:

---------------------------
|           |             |
| DIV 1     |  DIV 2      |
|           |             |
---------------------------

Первый div плавает влево, в то время как второй div плавает вправо. Левый div имеет правую границу, а второй div имеет левую границу. Мне бы хотелось, чтобы больший из этих элементов div продолжал свою границу до самого конца их контейнера, и мне нужна только одна граница.

Как мне этого добиться?

Любая помощь будет принята с благодарностью.

Answer 1

Используйте jQuery

добавить это в голову

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

и поместите этот фрагмент в голову или тело.

<script type="text/javascript">
    $(document).ready(function() {
        var large=$(div).eq(0), small = $(div).eq(1), temp;
        if(large.height()<small.height()) {
            temp = large;
            large = small;
            small = temp;
        }
        large.css('border-right','1px solid black');
        small.css('border-left', '0px');
    });
</script>

Answer 2

если вы имеете в виду, что div один выше, чем div 2, и вы хотите, чтобы они были одинаковой высоты, то этот сценарий для вас.

function setHeight(id1, id2){

   //haal de elementen op en plaats deze in een lokale variabel
   var elem1 = document.getElementById(id1);
   var elem2 = document.getElementById(id2);

   // controleer of de offsetHeight van element1 of 2 groter is
   // dan de ander en pas de kleinste aan
   if(elem1.offsetHeight>elem2.offsetHeight){
       elem2.style.height = elem1.offsetHeight+'px';
   }else{
       elem1.style.height = elem2.offsetHeight+'px';
   }


}

поместите это в файл javascript или в заголовок вашего html-файла внутри тега de script ofcourse и поместите следующий код внутри тега body

onload="setHeight(id1, id2)"

теперь вам просто нужно дать div'ам, которые вы хотите изменить, размер id1 и 2 (может быть любым именем, если он есть в параметрах), и это работает:)

удачи, и дайте мне знать, если у вас есть вопросы. Я использую это сам, так что это работает:)

Answer 3

Одним из способов достижения этого эффекта является абсолютное позиционирование. В этом методе ширина вашего контейнера известна (например, 1024px), и вы делите доступное пространство между двумя вашими div, 324px для вашего div2 и 700px для div1. Таким образом, вам не нужно плавать divs. Все, что вам нужно сделать, это определить position: relative; для контейнера и position: absolute; для двух делителей. Затем вы должны указать

top: 0;
right: 324px;
bottom: 0;
left: 0;

для вашего div1.

Другим методом является плавающее, которое вы использовали здесь. Плавая, вы должны плавать оба ваших div влево или вправо, и указать ширину для каждого из них. Тогда вам не нужно беспокоиться о высоте ширины, потому что div1 будет расширен в зависимости от его содержимого.

Answer 4

Вы хотите сказать, что хотите, чтобы больший div был полной высотой контейнера?Если это то, что вы имеете в виду, вы можете указать высоту, равную 100% в css для большего div.