我有两个div
在同一行上对齐,由一条垂直线分隔,我希望该行始终具有父div
的高度。
我尝试实现找到的所有解决方案,但没有一个有效(不能使用position:absolute
,父级的display:table
或overflow:hidden
没有效果。)
这是我的代码:
HTML:
<div class="parent-div">
<div class="first-child">
<span class="block">Item</span>
<span class="block">Item</span>
<span class="block">Item</span>
</div>
<div class="second-child">
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
<span class="block">Content here</span>
</div>
</div>
CSS:
.parent-div {
background:green;
display: inline-block;
width: 100%;
}
.first-child,
.second-child {
float: left;
}
.first-child {
width: 50px;
border-right: 2px solid red;
}
.second-child {
padding-left: 10px;
}
.block {
display: block;
}
答案 0 :(得分:5)
您可以将display:inline-block
更改为display:flex;
至.parent-div
检查 demo
答案 1 :(得分:1)
如果你给父div显示一个像这样的表:
.parent-div {
height: 100%;
display: table;
}
对于孩子来说,一个tabel-cell并删除像这样的浮动:
.first-child,
.second-child {
display:block;
height: 100%;
}