我需要的是以下两个 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>
最佳答案
您也可以使用 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/
关于html - 如何并排创建两个 div,其中一个 div 延伸到页面宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33877155/