CSS 布局实现左边固定宽度，右边占满剩余宽度
2017-06-13 本文已影响1455人
rayman_v
- float 浮动
<style>
.container{ background-color: yellow; }
.container .left{ background-color: blue; width: 100px; }
.container .right { background-color: red; }
.s1 {}
.s1 .left{float: left; }
.s1 .right{overflow: hidden;}
.s1 .clear{clear: both;}
</style>
<div class="container s1">
<div class="left">左边左边左边左边左边左边左边左边左边左边左边左边</div>
<div class="right">右边右边右边右边右边右边右边右边右边右边右边右</div>
<div class="clear"></div>
</div>
浮动是最普遍实现的方式，但 css 浮动的初衷并不是用于布局的，所以浮动布局迟早会被淘汰，应该作为备选方式使用。
- 左边绝对定位
<style>
.container{ background-color: yellow; }
.container .left{ background-color: blue; width: 100px; }
.container .right { background-color: red; }
.s2 {position: relative;}
.s2 .left{position: absolute; left: 0; top: 0;}
.s2 .right{margin-left: 100px;}
</style>
</head>
<body>
<div class="container s2">
<div class="left">左边左边左边左边左边</div>
<div class="right">右边右边右边右边右边右边右边右边右边右边右边右右边右边右边右边右边右边右边右边右边右边右边右</div>
</div>
绝对定位方式有个缺点，当左边高于右边时，左边会超出父元素，需要使用 js 补救。
- flex 布局
<style>
.container{ background-color: yellow; }
.container .left{ background-color: blue; width: 100px; }
.container .right { background-color: red; }
.s3 { display: flex; }
.s3 .left{ }
.s3 .right{flex-grow: 1;}
</style>
<div class="container s3">
<div class="left">左边左边左边左边左边左边左边左边左边</div>
<div class="right">右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边</div>
<div class="clear"></div>
</div>
flex 是最鼓励使用的方式，低端 IE 不支持，但在移动端得到了广泛的使用。
