铁雪资源网 Design By www.gsvan.com
两端对齐效果
如上图中红色的9个div它们中间有间距,而最左边和最右边是没有间距的,这种布局如果使用css3的flex来实现是非常简单的,而如果要使用float布局就需要一些特殊的技巧了。
实现原理
红色的9个div左浮动,左右margin为25px,父容器左右margin为-25px,这样相当于是把父容器拉长了,因此就达到了两端对齐的效果。Bootstrap的栅格系统就是这么干的,bootstrap要求我们.col-xx-xx的父容器需要为.row,而.row的左右padding就为-15px。
示例代码
<style type="text/css"> *{margin: 0;padding: 0;} .container{ width: 1300px; margin: 0 auto; background-color: #f90; } .header{ width: 1000px; height: 40px; margin: 0 auto; background-color: #eee; } .main{ width: 1000px; margin: 0px auto; background-color: #f60; } .box{ /*给.box设置左右margin为负的就是为了冲突掉最左边元素的margin-left和最右边元素的margin-right*/ margin: 0 -1.6666667%; } .box::after, .box::before{display: table;content: " ";} .box::after{clear: both;} .item{ width: 30%; height: 200px; margin: 20px 1.6666667%; background-color: #f10; float: left; } </style>
<div class="container"> <div class="header">下面的元素会与我对齐</div> <div class="main"> <div class="box"> <div class="item">我是第1个div元素</div> <div class="item">我是第2个div元素</div> <div class="item">我是第3个div元素</div> <div class="item">我是第1个div元素</div> <div class="item">我是第2个div元素</div> <div class="item">我是第3个div元素</div> </div> </div> </div>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无详解css使既有浮动又有左右margin的多个元素两端对其的评论...