Question

这应该很简单，但我无法让它发挥作用。

我只是想让石灰色背景展开并适合它父母容器（IE：洋红色部分）的当前高度的100％。这是在行动：

以下是代码：

<div style="width:100%;">
    <div style="margin: 0 auto; width: 80%; background-color:magenta;">

        <div style="display:inline-block; float:left; width:25%;">
            <img src="http://www.bjbzryl.com/data/out/7/780401.jpg" style="width:100%;" />
        </div>

        <div style="display:inline-block; float:left; width:73%; margin-left:2%; background-color:lime;">
            <p style="float:left; display:inline-block; margin:2% 2% 2% 2%;">blah blah blah</p>
        </div>


        <div style="clear:both;"></div>

    </div>
</div>

Answer 1

将其转换为flex，并且flex子项将与父项的高度相匹配，您也可以删除inline-block，float和您的clearfix代码。

<div style="width:100%;">
  <div style="margin: 0 auto; width: 80%; background-color:magenta; display: flex;">

    <div style="width:25%;">
      <img src="http://www.bjbzryl.com/data/out/7/780401.jpg" style="width:100%;" />
    </div>

    <div style="width:73%; margin-left:2%; background-color:lime;">
      <p style="float:left; display:inline-block; margin:2% 2% 2% 2%;">blah blah blah</p>
    </div>

  </div>
</div>

Answer 2

最好使用flex而不是float：

＆＃13;

{{1}}

＆＃13;

如何扩展父Div高度以填充它的父母

2 个答案: