两端对齐效果
如上图中红色的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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
当我们写css的时候,有时候会忘记设计里面存在的临界情况。举个例子来说吧,当内...
简介: 蚂蚁链开发者大会是由蚂蚁集团旗下科技品牌蚂蚁链发起的技术生态会,通过...
由于自己公司产品里头,有个按钮在点击之后,会有一两秒的等待时间(寄认证信)...
最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森...
Debug用来追踪代码的运行流程,通常在程序运行过程中出现异常,启用Debug模式可...
TOP云(zuntop.com)科技9月20日消息,埃利森说亚马逊是甲骨文的头号云计算竞争...
transform 和 translate transform指变换、变形,是css3的一个属性,和其他width...
有个项目是,这么个情况,输入框,实时监测输入,触发请求。 第一想法是input 上...
一、概述 使用 docker 容器部署项目已经成为开发者必须掌握的技能,当使用 docke...
作者 / Dave Burke, VP of Engineering 今天在 Google I/O 大会上,我们发布了 A...