让两个div中较大的一个并排浮动以扩展其边界?

时间:2011-10-07 05:37:24

标签: html border

我有两个<div>,如下所示:

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

第一个div向左浮动,而第二个div向右浮动。左边的div有一个右边框,而第二个div有一个左边框。 我希望这些div中较大的一个将其边框一直延伸到容器的底部,我只想要一个边框。

我怎么能实现这个目标?

非常感谢任何帮助。

4 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

你的意思是你想让较大的div成为容器的整个高度吗?如果这就是你的意思,你可以在更大的div的css中指定高度为100%。

答案 2 :(得分:0)

实现这种效果的一种方法是通过绝对定位。在此方法中,容器的宽度是已知的(例如1024px),您可以划分两个div之间的可用空间,div2为324px,div1为700px。这样,您就不必浮动div。您所要做的就是为容器定义position: relative;,为两个div定义position: absolute;。然后你必须指定

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

代表div1

另一种方法是你在这里使用的浮动。通过浮动,您应该将两个div向左或向右浮动,并为每个div指定宽度。那么你不应该担心宽度的高度,因为div1会根据其内容进行扩展。

答案 3 :(得分:0)

如果你的意思是div 1高于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)"

现在你只需要给你想要调整id1和2大小的div(可以是任何名称,只要它在参数中有)并且它可以工作:)

祝你好运, 如果你有自己的话,请告诉我。我自己使用它,所以它有效:)