css - 具有一个最大宽度列的流体列

Question

我正在尝试制作两列布局，其中:

第一列:最大宽度为 200 像素第二列:填满剩余空间

我已经尝试了几个示例，但未能达到预期的效果。

由于第 1 列不会是固定宽度，因此绝对定位并在第 2 列添加左边距会留下空间距。

谁能帮帮我？

Answer 1

你可以看看flexbox现代浏览器已经很好地支持它。

快速概览:http://learnlayout.com/flexbox.html
更详细:https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

或者，如果您的用例非常简单，您可以只使用 CSS 中的 calc 函数。例如:

#first {
    width: 200px;
}

#second {
    width: calc(100% - 200px);
}