我在一个包装器中并排放置了两个 div。其中一个 div 的内容比另一个多,我希望第二个 div 填充包装的垂直空间。
.wrapper {
height: 50%;
width: 50%;
outline: 1px solid gray;
font-size: 0px;
}
.left {
display: inline-block;
width: 70%;
font-size: 16px;
background: tomato;
}
.right {
font-size: 16px;
background: gold;
width: 30%;
display: inline-block;
vertical-align: top;
}
<div class="wrapper">
<div class="left">
This is left
This is left
This is left
This is left
This is left
This is left
</div>
<div class="right">
This is right
</div>
</div>
我知道如何使用 flexbox 做到这一点,但由于兼容性问题,我想在没有它的情况下做到这一点。有谁知道怎么办?
最佳答案
你可以通过定位来做到这一点:
.wrapper {
position: relative; /* added */
height: 50%;
width: 50%;
outline: 1px solid gray;
font-size: 0px;
}
.left {
display: inline-block;
width: 70%;
font-size: 16px;
background: tomato;
}
.right {
position: absolute; /* added */
height: 100%; /* added */
font-size: 16px;
background: gold;
width: 30%;
display: inline-block;
vertical-align: top;
}
<div class="wrapper">
<div class="left">
This is left
This is left
This is left
This is left
This is left
This is left
</div>
<div class="right">
This is right
</div>
</div>
关于html - 兄弟 div 在没有 Flexbox 的情况下填充包装器内的垂直空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47433029/