css两端对齐——div+css布局实现2端对齐的4种⽅法总结
div+css布局实现2端对齐是我们⽹页排版中经常会使⽤到的，这篇⽂章将总结⼀下可以实现的⽅法：
html结构
实现demo⾥⾯的div通过Css进⾏2端对齐。
1 <div class="box">
2    <div class="demo">
3        <div>1</div>
4        <div>2</div>
5        <div>3</div>
6    </div>
7 </div>
1.margin负值的⽅式
该⽅法需要外⾯多嵌套⼀层来实现，通过元素的间距，做为中间层的margin溢出值来实现
1 <style>
2 .box{
3      width:300px;margin:auto;overflow:hidden;border:1px solid #ddd;
4 }
5 .box .demo{
6    margin-left:-10px;width:310px
7 }
8 .box .demo div{
9      width:93.333px;/*(计算：（300-10*2）/3)*/
10float:left;
11      margin-left:10px;
12 }
13 </style>
2.display:inline-block/text-align:justify⽅式
justify⽅式⽐较简单⽅便。只要⼀个简单元素做了声明，⾥⾯的元素就⾃动等间距两端对齐布局啦！根本⽆需计算每个列表元素间的margin 间距，更不⽤去修改⽗容器的宽度。
注意⼀点：demo结构内元素必须存在【换⾏符】或【空格符】，否则直接连着写将不会⽣效
1 <style>
2 .demo{
3      margin:0;padding:0;
4      text-align:justify;
5      text-align-last:justify;/*解决IE的⽀持*/
6      line-height:0;/*解决标准浏览器容器底部多余的空⽩*/
7 }
8 @media all and (-webkit-min-device-pixel-ratio:0){
9  .demo{
10      font-size:0;/*webkit清除元素中使⽤[换⾏符]或[空格符]后，最后元素多余的空⽩*/
11  }
12 }
13 .demo:after{/*text-align-last:justify只有IE⽀持，标准浏览器需要使⽤ .demo:after 伪类模拟类似效果*/
14      display:inline-block;
15      overflow:hidden;
16      width:100%;
17      height:0;
18      content:'';
19      vertical-align:top;/*opera浏览器解决底部多余的空⽩*/flex布局对齐方式
20 }
21 .demo div{
22      width:20%;
23      display:inline-block;
24      text-align:center;/*取消上层元素的影响*/
25      text-align-last:center;
26      font-size:12px;
27 }
28 </style>
3.css3 属性 space-between
该⽅法基于webkit内核的webapp开发和winphone IE10及以上，常⽤于移动端布局。
1 <style>
2 .demo{
3    display:-webkit-box;
4    display:-webkit-flex;
5    display:-ms-flexbox;
6    display:flex;
7    -webkit-box-pack:justify;
8    -webkit-justify-content:space-between;
9    -ms-flex-pack:justify;
10    justify-content:space-between;
11 }
12
13 .demo div{
14      width:30%;
15 }
16 </style>
4.css3属性column-count
column属性是多列布局，使⽤column来实现两端对齐只需要设置模块的个数跟column的列数⼀致即可，推荐使⽤于移动端布局
1 <style>
2 .demo{
3      -webkit-column-count:3;-moz-column-count:3;column-count:3;
4      -webkit-column-gap:10px;-moz-column-gap:10px;column-gap:10px;
5 }
6
7 .demo div{
8
9 }
10 </style>
完结~~~~~有更好的实现请留⾔哦

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。