如何创建两个等高列,而右列在左列内?我已经知道制作2个相等高度的列的其他方法,但是CSS没有父选择器,因此它将不起作用。
我正在尝试做的是创建可扩展的div。当我折叠左列的div时,我需要右列隐藏。我以前使用JavaScript进行过这项工作,但是现在我正在寻找纯CSS解决方案。如果可以将右列放在左列中,则可以解决问题。同样,绝对位置也不足够。
同样,两列的高度应等于最大列的内容。
<div class="container">
<div class="left-column">
ssss
dddd<br/>
ffff<br/>
ddd
<div class="right-column">
fffff
</div>
</div>
</div>
.container
{
height:100%;
}
.left-column
{
background-color:blue;
width:50%;
}
.right-column
{
background-color:red;
width:100%;
position:relative;
left:100%;
}
https://codepen.io/anon/pen/MmVYma
最佳答案
使用FlexBox! (display:flex;
)
.container {
height:100px;
}
.left-column {
display:flex;
background-color:blue;
}
.right-column {
background-color:red;
width:50%;
margin-left:auto;
}
<div class="container">
<div class="left-column">
ssss
dddd<br/>
ffff<br/>
ddd
<div class="right-column">
fffff
</div>
</div>
</div>
https://codepen.io/krabbypattified/pen/ZKxYJW
Here's a guide关于您可以使用它完成的伟大工作!
关于html - 如何用左列中的右列创建2个等高列?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43905376/