自动设置有两个孩子的父母的身高，省略父母和一个孩子的div的身高

Question

在以下问题上，我会屈服。

假设我的结构如下

<div class="full_row">
  <div class="content_left"></div>
  <div class="content_right">
    <div class="inner_row"></div>
    <div class="inner_row"></div>
  </div>
</div>

使用以下CSS：

.full_row {
  background: lightgrey;
  border: 1px solid grey;
  width: 400px;
}

.content_left {
  height: 100%;
  float: left;
}

.content_right {
  float: left;
  border: 2px solid grey;
}

.inner_row {
  height: 25px;
  width: 250px;
  border: 1px solid white;
}

如何实现以下目标：

• content_right知道它应该高50像素（因为它有两个孩子，每个高25像素）
• full_row知道应该为50px高（因为其最大的子级为50px高）
• content_left的高度将为50px，是full_row高度的100％。
• 额外的问题：我可以让content_left弄清楚它应该为150px宽，以填补content_right（400px-250px）留给他的空白吗？

我想使用普通的CSS来做到这一点，因为我想使事物闪亮并为其赋予动画效果。 我有包含所需状态的codepen（和上面的例子） 在这里 。

老实说，我试图在Stackoverflow和Google上找到它，并找到了一些有关何时知道父高的示例。 但是，还没有找到一个示例，其中一个孩子确定其父母的身高，而后者又确定另一个孩​​子的身高。 我几乎没有开始使用html / css。

非常感谢您的帮助。

Answer 1

是时候开始学习Flexbox了！ 看看这个例子。

 .full_row { display: flex; } .full_row > div { width: 50%; padding: 10px; } .content_left{ background: red; } .content_right{ background: blue; } 

 <div class="full_row"> <div class="content_left">aaaa</div> <div class="content_right"> <div class="inner_row">bbbb</div> <div class="inner_row">cccc</div> </div> </div> 

Answer 2

对于这样的东西，Flexbox可能是一个不错的选择。 我牢记您自定义的列大小：

 .full_row { background: lightgrey; border: 1px solid grey; width: 400px; display: flex; flex-direction: row; flex-wrap: nowrap; } .content_left { height: 100%; flex-grow: 1; } .content_right { border: 2px solid grey; flex-direction: column; } .inner_row { height: 25px; width: 250px; border: 1px solid white; } 

 <div class="full_row"> <div class="content_left">left</div> <div class="content_right"> <div class="inner_row"></div> <div class="inner_row"></div> </div> </div> 

Answer 3

我猜有几种方法可以做到这一点，但是不确切知道您的明确目标是什么，这是一种解决方案：

.full_row {
    display: table;
    overflow: hidden;
    background: lightgrey;
    border: 1px solid grey;
    width: 400px;
}

.content_left {
    display: table-cell;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.content_right {
    display: table-cell;
    border: 2px solid grey;
}

.inner_row {
    height: 25px;
    width: 250px;
    border: 1px solid white;
}

重要提示：请记住要浮动：远离内容。 如果您想确定，但我仍然不知道您想要的结果，但是在正确的内容上添加float：right不会有任何危害。