html - 两列布局，左侧为流体，右侧为剩余宽度

Question

我需要类似于 this 的东西和 this .但是我希望右列不是固定大小，而是可变大小。是否可以？

–––––––––––––––––––––––––––––––––––––––––––––––––––––––
|some text|stretch to fill the remaining space        | <- viewport
–––––––––––––––––––––––––––––––––––––––––––––––––––––––

Answer 1

这是float 解决方案。您可以为.one 列设置一个固定的width，或者保持原样，让内容来决定。并将 overflow: auto; 或 overflow: hidden; 设置为 .two 列。

.one {
    float: left;
    background: aqua;
}
.two {
    overflow: auto;
    background: yellow;
}

<div class="one">hello</div>
<div class="two">world</div>

flexbox 解决方案。关键是将 flex: 1; 又名 flex-grow: 1; 设置为动态宽度列。关注this查看浏览器支持表。

body {
    display: flex;
}
.one {
    background: aqua;
}
.two {
    flex: 1;
    background: yellow;
}

<div class="one">hello</div>
<div class="two">world</div>