css实现等高布局 两栏自适应布局 三栏自适应布局
发布时间
阅读量：
阅读量
总结一下css常用的布局样式
等高布局
等高布局实现方法有很多 在这里总结常用的三种方法
- padding补值法
该方法是通过负margin，同时将padding的值设为正的margin值实现的 具体实现方法如下：
<div class="container">
<div class="item1">该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 </div>
<div class="item2">该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 </div>
</div>相应的css实现如下
.container{
width:800px;
background-color: #98F59E;
overflow: hidden;
}
.item1,.item2{
float:left;
width:300px;
background-color: #96FCEF;
word-wrap: break-word;
margin-left:10px;
margin-bottom: -10000px;
padding-bottom:10000px;
border: 2px solid #A7525C;
}运行结果如下：
该方法的缺点是等高的div没有底边的边框。常用的解决方式是使用背景图来模仿底部边框或使用div来模仿列的边框。下面主要介绍第二种方法，第二种方法主要是在等高元素中加入一个相对于容器绝对定位的div元素，并设置其高度为边框高度
<div class="container">
<div class="item1">该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的
<div class='colBottom1'></div>
</div>
<div class="item2">该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的 该方法是通过负margin，同时将padding的值设为正的margin值实现的
<div class='colBottom2'></div>
</div>
</div>
<style type="text/css">
.container{
width:800px;
background-color: #98F59E;
overflow: hidden;
position: relative;
}
.item1,.item2{
float:left;
width:300px;
background-color: #96FCEF;
word-wrap: break-word;
margin-left:10px;
margin-bottom: -10000px;
padding-bottom:10000px;
border: 2px solid #A7525C;
}
.colBottom1{
position: absolute;
bottom: 0;
left: 10px;
height: 2px;
width: 304px;
background-color:#A7525C;
}
.colBottom2{
position: absolute;
bottom: 0;
left: 324px;
height: 2px;
width: 304px;
background-color:#A7525C;
}
</style>其运行结果如下
- flex布局法：
通过将包含等高布局div的父div设置为flex布局 并且align-items为stretch实现等高布局
.container{
width:800px;
display:flex;
align-items: stretch;
background-color: #09EE4E;
}
.item1,.item2{
width:300px;
background-color: #42EBA2;
margin-left:10px;
}截图如下
- display值为table-cell
display值为table-cell可以实现等高布局 实现方法如下
.container{
width:800px;
background-color: #09EE4E;
}
.item1,.item2{
display: table-cell;
width:300px;
background-color: #42EBA2;
}值得注意的是 这里子div设置margin没有作用
两栏自适应布局
- 浮动布局
采用的是左边浮动，右边加上一个margin-left值，让他实现左边固定，右边自适应的布局效果
<div class="item1"><div><div class="item2"</div>
.item1{
float:left;
width:300px;
height:400px;
background-color: #41D844;
}
.item2{
margin-left: 310px;
height:400px;
background-color: #41D844;
}- 绝对定位实现
左边固定的的元素绝对定位并负边距，右边自适应元素设置margin-left的值来实现左边固定宽度右边自适应宽度的布局效果
.item1{
position:absolute;
margin-right: -100%;
width:300px;
height:400px;
background-color: #41D844;
}
.item2{
margin-left: 310px;
height:400px;
background-color: #41D844;
}三栏自适应布局
- float+负margin实现方法
主要实现方法：HTML写元素的时候先写中间元素，在写左元素和右元素。css布局：容器元素、左元素和右元素都是左浮动，左元素设置负margin为-100%，右元素设置负margin为负右元素的宽度，中间元素在容器元素中，设置margin-left为左元素的宽度+左元素和中间元素的间隔，设置margin-right为右元素的宽度+右元素和中间元素的间隔。实现代码如下
<div class="container"><div class="center"></div></div>
<div class="left"></div>
<div class="right"></div>相关css代码如下
.container{
width:100%;
height:300px;
float:left;
}
.center{
background-color: #16EA74;
/*width:500px;*/
height:300px;
margin-left:250px;
margin-right:250px;
}
.left{
background-color: #16EA74;
float:left;
width:200px;
height:300px;
margin-left:-100%;
}
.right{
background-color: #16EA74;
width:200px;
height:300px;
float:left;
margin-left:-200px;
}- float方法实现三栏自适应布局
主要实现方法：HTML中元素的顺序问题，先写左右两个元素，最后写中间元素，左右两个元素分别左浮动和右浮动，中间元素设置margin-left和margin-right
.center{
margin-left:300px;
margin-right:300px;
height:300px;
background-color: #23ED8D;
}
.left{
float:left;
height:300px;
width:200px;
background-color: #23ED8D;
}
.right{
float:right;
height:300px;
width:200px;
background-color: #23ED8D;
}全部评论 (0)
还没有任何评论哟~