CSS三列布局小记，走出HTML布局阴影

抹茶米苏

于 2014-02-25 19:37:13 发布

阅读量562

点赞数

分类专栏： CSS 文章标签： HTML css 布局三列布局浏览器

本文链接：https://blog.csdn.net/u013770247/article/details/19929181

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

两端固定宽度，中间自适应结构：

<div class="wrap">
	<div class="main">
		<div class="content"></div>
	</div>
	<div class="submain">2</div>
	<div class="sidebar">3</div>
</div>

.wrap{width: 500px;border: 1px solid;overflow: hidden;}
.main{float: left;width: 100%;}
.content{height: 50px;margin: 0 150px;background-color: #f60;}
.submain{float: left;width: 150px;height: 50px;margin-left: -100%;background-color: #6f0;}
.sidebar{float: left;width: 150px;height: 50px;margin-left: -150px;background-color: #06f;}

结果如下所示：