资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/让多个元素贴边平分布局

让多个元素贴边平分布局

Forelax / 2858人阅读

摘要：怎样让多个元素贴边平分为什么会有这个疑问呢首先说明一下，接触前端有一年的时间了，自认为对静态布局不在话下，果然，自负的人最容易被打脸呐，刚换了一份工作，公司对前端要求比较严格。

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

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

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

1.怎样让四个没有内边距和边框的元素贴边平分？ 
</>复制代码 
  2.         
  3.             
    1
  4.             
    2
  5.             
    3
  6.             
    4
  7.         
  8. /*
  9.  * 怎样让四个没有内边距和边框的元素贴边平分？
  10.  */
  11.         .box{
  12.             width: 1170px;
  13.             margin: 30px auto 0;
  14.             border:1px solid #00a09d;
  15.             font-size: 0;
  16.         }
  17.         .box>div{
  18.             display: inline-block;
  19.             font-size: 16px;
  20.             width:23.5%;
  21.             height: 100px;
  22.             background: #ffffd;
  23.             text-align: center;
  24.         }
  25.         .box>div:nth-child(n+2){
  26.             margin-left:2%;
  27.         }

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

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

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

</>复制代码 
  2.         
  3.             
    1
  4.             
    2
  5.             
    3
  6.             
    4
  7.         
  8. /*
  9. * 怎样让四个有没有内边距和边框的元素贴边平分？
  10.  */
  11.     /*基础样式*/
  12.     .div-box{
  13.         width: 1170px;
  14.         margin: 30px auto 0;
  15.         border: 1px solid #000;
  16.     }
  17.     .div-box div{
  18.         width: 150px;
  19.         height: 150px;
  20.         background: #ffffd;
  21.         padding: 15px;
  22.         border: 1px solid #000;
  23.         text-align: center;
  24.     }
</>复制代码 
  1. 居中方式一 : 怪异盒模型+平分宽度
</>复制代码 
  1. /*居中方式一:怪异盒模型+平分宽度*/
  2.             .div-box1 div{
  3.                 box-sizing: border-box;
  4.             }
  5.             .div-box1{
  6.                 font-size: 0;
  7.             }
  8.             .div-box1 div{
  9.                 display: inline-block;
  10.                 font-size: 16px;
  11.                 width: 23.5%;
  12.             }
  13.             .div-box1 div:nth-child(n+2){
  14.                 margin-left:2%;
  15.             }
</>复制代码 
  1. 居中方式二:浮动+怪异盒模型+平分宽度
</>复制代码 
  1. /*居中方式二:浮动+怪异盒模型+平分宽度*/
  2.             .div-box2::after{
  3.                 content: "";
  4.                 display: block;
  5.                 clear: both;
  6.             }
  7.             .div-box2 div{
  8.                 box-sizing: border-box;
  9.                 float: left;
  10.                 width: 23.5%;
  11.             }
  12.             .div-box2 div:nth-child(n+2){
  13.                 margin-left:2%;
  14.             }
</>复制代码 
  1. 居中方式三:弹性盒子（用这个最好啦）
</>复制代码 
  1. /*居中方式三:弹性盒子（用这个最好啦）*/
  2.         .div-box3{    
  3.             display: flex;
  4.             /*flex-direction:row;  //子元素的排列方向，默认是row  */  
  5.             /*flex-wrap:nowrap;    //子元素超出父级后是否换行，默认不换行，设置的宽度会失效  */  
  6.             /*flex-flow:row nowrap //上面两个属性的复合写法  */
  7.             /*子元素在父元素上的对其方式:flex-start前对齐||flex-end后对齐||center居中对齐||space-between和边缘无间距对齐||space-around和边缘有间距对齐*/
  8.                 justify-content: space-between;  
  9.             }
  10.             .div-box3>div{
  11.                 width: 23%;
  12.             }
  13.             .div-box3>div:nth-child(n+2){
  14.                 margin-left: 2%;
  15.             }
</>复制代码 
  1. 居中方式四:宽度属性计算（不提倡，兼容性不好）
</>复制代码 
  1. /*居中方式四:宽度属性计算（不提倡，兼容性不好）*/
  2.             .div-box4{
  3.                 font-size: 0;
  4.             }
  5.             .div-box4>div{
  6.                 display: inline-block;
  7.                 font-size: 16px;
  8.                 width: calc(23.5% - 32px); /*数学符号之间一定要有空格*/
  9.             }
  10.             .div-box4>div:nth-child(n+2){
  11.                 margin-left: 2%;
  12.             }

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

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

云服务器 GPU云服务器 js让元素上下跳动 贴边 html平分上下区域 让AC

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115834.html

相关文章

  • 让多个元素贴边平分布局

    摘要：怎样让多个元素贴边平分为什么会有这个疑问呢首先说明一下，接触前端有一年的时间了，自认为对静态布局不在话下，果然，自负的人最容易被打脸呐，刚换了一份工作，公司对前端要求比较严格。 怎样让多个元素贴边平分？         为什么会有这个疑问呢？首先说明一下，接触前端有一年的时间了，自认为对静态布局不在话下，果然，自负的人最容易被打脸呐，刚换了一份工作，公司对前端要求比较严格。      ...

    frontoldman 评论0 收藏0

  • web移动端开发-flex布局父项常见属性超详解（附图解）

    摘要：目录布局父项常见属性布局父项常见属性一一属性属性演示演示二二属性属性演示演示 目录 flex布局父项常见属性 一、flex-direction 1.属性 2.演示 flex-direction: row; flex-direction: row-reverse;  f...

    Lucky_Boy 评论0 收藏0

  • 解剖CSS布局原理

    摘要：前言本文将带你重新认识布局，带你解剖布局原理，前提是你要有基础本文将解除你在布局方面的疑惑。以下将对布局元素和文档流进行详细讲解。而且还能保持文档流，这是其他元素做不到的。 前言 本文将带你重新认识CSS布局，带你解剖布局原理，前提是你要有基础！本文将解除你在布局方面的疑惑。认识每个布局元素，了解他们的特性，你才知道为什么会是这样的结果。本文内容纯属个人理解，不代表官方。 此文主要为理...

    李文鹏 评论0 收藏0

  • css table布局大法，解决你大部分居中、多列等高、左右布局的问题

    摘要：基于这样的布局方式，你就可以把什么定高不定高定宽不定宽多行单行的水平垂直居中都搞定了。且不支持这就是所谓的布局大法。 看了这篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 单行定高水平垂直居中 单行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左边定宽右边自适应布局 左边右边定宽中间自适应三列布局 最...

    lijinke666 评论0 收藏0

发表评论

登陆后可评论

0条评论

Forelax

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<