float 配合简单的 html 结构实现三栏布局
HTML 结构如下
<div class="outer">
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</div>
CSS 代码,重点在于 overflow: hidden;
实现中间栏宽度自适应
.outer {
height: 100px;
border: 1px solid #000;
}
.outer > div {
height: 100%;
}
.left {
float: left;
width: 100px;
margin-right: 20px;
background-color: #f00;
}
.right {
float: right;
width: 100px;
margin-left: 20px;
background-color: #00f;
}
.middle {
background-color: #000;
overflow: hidden; /*重点*/
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。