首页 > 代码库 > 三列自适应布局
三列自适应布局
第一类，浮动在前：
<div class="left"></div> <div class="right"></div> <div class="main"></div>
方法一：float+margin
.main {
margin-left: 150px;
margin-right: 100px;
}
.left {
float: left;
width: 150px;
}
.right {
float: right;
width: 100px;
}
方法二：float+BFC
.main {
overflow: hidden;
}
.left {
float: left;
width: 150px;
}
.right {
float: right;
width: 100px;
}
第二类，主要内容在前：
方法三：float+负边距+relative
<div class="main"></div> <div class="left"></div> <div class="right"></div>
这里和两列布局有些不同，在两列布局中，.main只需要右移给.left空出位置就可以了，所以给他一个margin-left就能解决。而在三列布局中，他不仅需要给.left腾出空间，还要给.right腾出空间，此时margin已经无能为力了，所以需要他们三个外面的盒子来做这件事情：
body {
padding-left: 150px;
padding-right: 100px;
}
这样子就会产生一个问题，给body添加了padding之后，.main的宽度就减小了，这就意味着.left的margin-left值也会减小，于是，当.main的宽度减小到小于.left的宽度时，.left的负边距已经不能为他创造足够的空间到上面一行了，他就会被挤下去。所以，为了避免这个问题，需要给包裹盒子设置一个最小宽度，当屏幕宽度小于这个值时，他将不再收缩。
.main {
float: left;
width: 100%;
}
.left {
float: left;
position: relative;
left: -150px;
margin-left: -100%;
width: 150px;
}
.right {
float: left;
position: relative;
right: -100px;
margin-left: -100px;
width: 100px;
}
body {
min-width: 150px;
padding-left: 150px;
padding-right: 100px;
}
方法四：float+负边距+新盒子
<div class="main">
<div class="main-content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
这时的问题是，当屏幕宽度小于.left和.right宽度之和时，.main-content即中间那列已经完全被挤没了，所以，同样需要给他们外面的盒子设置一个最小宽度：
.main {
float: left;
width: 100%;
}
.left {
margin-left: -100%;
float: left;
width: 150px;
}
.right {
margin-left: -100px;
float: left;
width: 100px;
}
.main-content {
margin-left: 150px;
margin-right: 100px;
}
body {
min-width:500px;
}
方法五：flexbox
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.container {
min-width: 500px;
display: flex;
}
.main {
margin: 0 10px;
order: 1;
flex: 1;
}
.left {
width: 150px;
}
.right {
order:2;
width: 100px;
}
此文转载：地址：http://www.cnblogs.com/LiveWithIt/
三列自适应布局
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。