html - 如何并排创建两个 div，其中一个 div 延伸到页面宽度？

Question

我需要的是以下两个 div:

[-width-of-content-][------------------remaining-width-of-page----------------------------]

我记得在过去使用表格来做这件事是多么的轻而易举。但是现在表格是禁忌，那么我如何用div来实现呢？我花了好几个小时试图弄清楚这个问题!

<div style='float:left;display:inline-block'> Hello</div>
<div style='float:left;width:100%''> THIS DIV BREAKS</div>

Answer 1

您也可以使用 flexbox 实现此目的:http://jsfiddle.net/yr05wkuh/1/

这将使您的 DIV 保持相同的高度，而无需您设置值。

CSS

.container {
    display: flex;
}

.div1{
    background-color:yellow;
}

.div2{
    flex: 1 0;
    background-color: red;
}

HTML

<div class="container">
    <div class="div1"> Hello</div>
    <div class="div2"> THIS DIV BREAKS</div>
</div>

这是一个很好的资源:https://css-tricks.com/snippets/css/a-guide-to-flexbox/