div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法:
html结构
实现demo里面的div通过Css进行2端对齐。
<div class="box"> <div class="demo"> <div>1</div> <div>2</div> <div>3</div> </div> </div>
1.margin负值的方式
该方法需要外面多嵌套一层来实现,通过元素的间距,做为中间层的margin溢出值来实现
<style> .box{ width:300px;margin:auto;overflow:hidden;border:1px solid #ddd; } .box .demo{ margin-left:-10px;width:310px } .box .demo div{ width:93.333px;/*(计算:(300-10*2)/3)*/ float:left; margin-left:10px; } </style>
2.display:inline-block/text-align:justify方式
justify方式比较简单方便。只要一个简单元素做了声明,里面的元素就自动等间距两端对齐布局啦!根本无需计算每个列表元素间的margin间距,更不用去修改父容器的宽度。
注意一点:demo结构内元素必须存在