css元素分散贴边对齐

怎样让多个元素贴边平分？

为什么会有这个疑问呢？首先说明一下，接触前端有一年的时间了，自认为对静态布局不在话下，果然，自负的人最容易被打脸呐，刚换了一份工作，公司对前端要求比较严格。
公司使用的是bootstrap开发，我们都知道bootstrap框架最核心的是它的栅格系统，我当然也很喜欢这个啦，不过最近UI给我的设计图总是和bootstrap相矛盾，就好比说，有个模块需要每一个元素在移动端和屏幕之间有固定的间距，但是在响应到pc端时，要在有效宽度内贴边对齐。这就很扯淡啦。我画个图表示一下内心的狂躁……

就是实现下面这种结果，看着真的没什么难度，不过因为我是用bs的栅格来布局的，所以需要修改bs的padding的值，这种方法不算明智，所以我思考和汇总了几种实现的做法。都是很基础的。

1.怎样让四个没有内边距和边框的元素贴边平分？

<!--怎样让四个没有内边距和边框的元素贴边平分？--><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div></div>
/** 怎样让四个没有内边距和边框的元素贴边平分？*/.box{width: 1170px;margin: 30px auto 0;border:1px solid #00a09d;font-size: 0;}.box>div{display: inline-block;font-size: 16px;width:23.5%;height: 100px;background: #ddd;text-align: center;}.box>div:nth-child(n+2){margin-left:2%;}

这个是最基础的，也是最简单的，没什么好说的了，使用最简单的平分宽度实现。效果图：

2.怎样让四个有内边距和边框的元素贴边平分？
这个就有意思了，每次在开发过程中，只要设置width+padding+border，问题就接踵而来了。不是元素被挤到下一行，就是这一行的宽度没有平分完。所以我使用了下面的几种方法。
先设置基础样式：

<!--怎样让四个有内边距和边框的元素贴边平分？--><div class="div-box div-box1"><div>1</div><div>2</div><div>3</div><div>4</div></div>
/*
* 怎样让四个有没有内边距和边框的元素贴边平分？*//*基础样式*/.div-box{width: 1170px;margin: 30px auto 0;border: 1px solid #000;}.div-box div{width: 150px;height: 150px;background: #ddd;padding: 15px;border: 1px solid #000;text-align: center;}

居中方式一 : 怪异盒模型+平分宽度

/*居中方式一:怪异盒模型+平分宽度*/.div-box1 div{box-sizing: border-box;}.div-box1{font-size: 0;}.div-box1 div{display: inline-block;font-size: 16px;width: 23.5%;}.div-box1 div:nth-child(n+2){margin-left:2%;}

居中方式二:浮动+怪异盒模型+平分宽度

/*居中方式二:浮动+怪异盒模型+平分宽度*/.div-box2::after{content: "";display: block;clear: both;}.div-box2 div{box-sizing: border-box;float: left;width: 23.5%;}.div-box2 div:nth-child(n+2){margin-left:2%;}

居中方式三:弹性盒子（用这个最好啦）

/*居中方式三:弹性盒子（用这个最好啦）*/.div-box3{  display: flex;/*flex-direction:row;  //子元素的排列方向，默认是row  */  /*flex-wrap:nowrap;    //子元素超出父级后是否换行，默认不换行，设置的宽度会失效  */  /*flex-flow:row nowrap //上面两个属性的复合写法  *//*子元素在父元素上的对其方式:flex-start前对齐||flex-end后对齐||center居中对齐||space-between和边缘无间距对齐||space-around和边缘有间距对齐*/justify-content: space-between;  }.div-box3>div{width: 23%;}.div-box3>div:nth-child(n+2){margin-left: 2%;}

居中方式四:宽度属性计算（不提倡，兼容性不好）

/*居中方式四:宽度属性计算（不提倡，兼容性不好）*/.div-box4{font-size: 0;}.div-box4>div{display: inline-block;font-size: 16px;width: calc(23.5% - 32px); /*数学符号之间一定要有空格*/}.div-box4>div:nth-child(n+2){margin-left: 2%;}

以上四种方式实现的效果都是这样的：

最后，只有掌握最基础最底层的技术，才能在开发过程中更高效地完成任务。勤劳能致富，后面我要更努力去思考更有用的知识。：)

css元素分散贴边对齐相关推荐

html5中底部对齐怎么写,css设置元素底部垂直对齐
css中怎么让div里面的文字底部对齐两种办法,第一种可以作为默认选择.两种办法都可以让文字底部对齐. css如何使div里面的文字垂直对齐页面里有五段文字/图片,我想使每个部分的文字,像旁边的图 ...
html 强制分散对齐,CSS 水平分散对齐
想要一排按钮均匀分散对齐: 主页主页主页主页主页自然想到用text-align text-align: justify; 但有个问题, justify 是说对于多行文字,中间的文字分散对齐, ...
display:inline-block+text-align:justify实现列表元素的两端对齐
display:inline-block+text-align:justify实现列表元素的两端对齐. 2011-09-21 08:49:22 display:inline-block+text-al ...
CSS设置图片的对齐
CSS设置图片的对齐横向对齐方式图片的水平对齐方式和文字的水平对齐方式基本相同,分别是左.中.右三种方式,不同的是,图片的水平对齐通常不能直接通过设置图片的text-align属性设置,而是,通过 ...
[css] 用css怎么实现两端对齐？
[css] 用css怎么实现两端对齐? 文本的两端对齐<style>.form .text {display: inline-block;width: 65px;text-align-la ...
html定位一个元素,css元素定位
css元素定位 1. position:static|无定位 position:static是所有元素定位的默认值, 一般不用注明,除非有需要取消继承的别的定位 example: #div-1 { p ...
box-align,box-pack实现元素垂直底部对齐
自己写了一个图表样式,利用box-align,box-pack属性end实现了其内部元素垂直底部对齐,在利用该属性前,设置其display属性为box即可. css代码: .tubiao-conten ...
css中文字段落对齐,CSS段落对齐方式
CSS段落对齐有两种方式:水平对齐和垂直对齐. 1.水平对齐: (1).text-align:left; //左对齐 (2).text-align:right; //右对齐 ...
CSS元素总结及HTML布局
HTML标签 <div>布局标签 <h1-h6>标题标签 <p>段落标签 <a>超 ...

css元素分散贴边对齐

怎样让多个元素贴边平分？

css元素分散贴边对齐相关推荐

最新文章

热门文章