我有两个<div>
,如下所示:
---------------------------
| | |
| DIV 1 | DIV 2 |
| | |
---------------------------
第一个div向左浮动,而第二个div向右浮动。左边的div有一个右边框,而第二个div有一个左边框。 我希望这些div中较大的一个将其边框一直延伸到容器的底部,我只想要一个边框。
我怎么能实现这个目标?
非常感谢任何帮助。
答案 0 :(得分:1)
添加此内容
<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(可以是任何名称,只要它在参数中有)并且它可以工作:)
祝你好运, 如果你有自己的话,请告诉我。我自己使用它,所以它有效:)