html5 填充剩余宽度,使div填充剩余宽度

Flex-boxs是解决方案-很棒。十年来，我一直想从CSS中获得这样的东西。您所需要做的就是display: flex为您的“ Main”样式添加样式flex-grow: 100(并且100是任意的-确切地说是100并不重要)。尝试添加此样式(添加颜色以使效果可见)：

#Main {

background-color: lightgray;

display: flex;

}

#div1 {

border: 1px solid green;

height: 50px;

display: inline-flex;

}

#div2 {

border: 1px solid blue;

height: 50px;

display: inline-flex;

flex-grow: 100;

}

#div3 {

border: 1px solid orange;

height: 50px;

display: inline-flex;

}

有关弹性盒的更多信息，请访问：https：//css-tricks.com/snippets/css/a-guide-to-flexbox/