Question

如何使用左列内的右列创建两个相等高度的列？我已经知道了制作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

Answer 1

使用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关于你可以用它做的伟大事情！

如何使用左列内的右列创建2个相等高度的列？

1 个答案: