我有 3 个并排的 div block 。左边是广告,中间的高度不明,可能是100px高度,也可能是1000px,右边也是比较不知名的高度。这 3 个 div 中的任何一个都可能是容器中最高的东西。
我希望左边的 div 延伸到容器 div 的底部。然后我可以将广告居中,但重要的是我将“左”延伸到其父项的底部。
.container{
background:green;
display: inline-block;
}
.left{
float:left;
margin-right:10px;
width:100px;
background:red;
}
.ad{
height:200px;
width:100px;
background:pink;
}
.middle{
float:left;
margin-right:10px;
width:200px;
background:red;
}
.right{
float:left;
width:100px;
}
.right .news{
background:red;
width:inherit;
height:200px;
}
.right .tweets{
background:red;
margin-top:10px;
clear:both;
width:inherit;
height:100px;
}
.clear { clear: both; }
<div class="container">
<div class="left">
<div class="ad">AD</div>
</div>
<div class="middle">
<ul>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
</ul>
</div>
<div class="right">
<div class="news">news</div>
<div class="tweets">tweets</div>
</div>
<div class="clear"></div>
</div>
最佳答案
你可以在parent(.container
)中添加overflow: hidden
和position: relative
并添加position: absolute
到 .left
:
.container {
background: green;
display: inline-block;
position: relative;
overflow: hidden;
}
.left {
height: 100%;
position: absolute;
left: 0;
}
.ad {
height: 100%;
width: 100px;
background: pink;
}
.middle {
float: left;
margin-right: 10px;
width: 200px;
background: red;
margin-left: 110px;
}
.right {
float: left;
width: 100px;
}
.right .news {
background: red;
width: inherit;
height: 200px;
}
.right .tweets {
background: red;
margin-top: 10px;
clear: both;
width: inherit;
height: 100px;
}
.clear {
clear: both;
}
<div class="container">
<div class="left">
<div class="ad">AD</div>
</div>
<div class="middle">
<ul>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
<li>ITEM</li>
</ul>
</div>
<div class="right">
<div class="news">news</div>
<div class="tweets">tweets</div>
</div>
<div class="clear"></div>
</div>
关于html - 将 child 的高度扩展到未声明高度的 parent ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27449616/