两栏自适应布局

发表于

左侧固定，右侧自适应，是一种很常见的布局，经常会见到

<div class="wrap" id="wrap">
    <div class="wrap-left">left</div>
    <div class="wrap-right">right</div>
</div>

.wrap { width: 600px; border: 2px solid #ff0000; }
.wrap-left { height: 200px; float: left; width: 100px; background: #ffd800; }
.wrap-right { height: 200px; margin-left: 100px; background: #b6ff00; }

右侧必须使用块级元素，能默认占满一行，这样才能做到自适应

将上面的代码稍做修改，就能让自适应变得更加灵活，右侧不仅仅可以随着容器的变化而变化，还可以随着左侧的变化而变化

<div class="wrap" id="wrap">
    <div class="wrap-left">left</div>
    <div class="wrap-right">right</div>
</div>

.wrap { width: 600px; border: 2px solid #ff0000; }
.wrap-left { height: 200px; float: left; width: 100px; background: #ffd800; }
.wrap-right { height: 200px; overflow: hidden; background: #b6ff00; }

将wrap-right中的 margin-left: 100px;改为 overflow: hidden;

这里其实是利用 overflow: hidden;触发wrap-right的BFC，来实现自适应的