前言

在我们日常页面开发中,经常会碰到如下的场景,多行布局需要两端对齐,最后一行不满一行的,需要左对齐的情况。这里,我会把不同的实现方案做个总结,帮补不同的同学,在各个场景下,能实现完美的解决方案。

企业微信20220330-110627@2x.png

实现

方案一

第一种通过float结合margin来实现,需要提前把设计的尺寸都计算好。

1202679505.png

假设:设计给的图纸和上面的一样,宽度为800px,每行显示5个宽度都是144px,并且之间的距离都是20px
实现方案:
html布局

  <div class="box">
    <div class="inner">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </div>

样式:

    .box {
      width: 800px;
      margin: 0 auto;
      background: orange;
      overflow: hidden;
    }
    .inner {
      width: 820px;
    }
    .item {
      float: left;
      width: 144px;
      height: 150px;
      margin-right:  20px;
      margin-bottom: 20px;
      background: #efefef;
    }

说明:通过计算,我们如果把5个盒子都放在宽度为800px的容器中,如果每个item都设置20px的间距,则每行的最后一个元素,就会多出来20px,那我们实际容器的宽度为820px,所有我们需要再800px的容器内,在加一个820px的容器,并且多出的20px,需要被影藏

可能有人会问题,如果适配不同分辨率怎么办?
第一种方案,相对没有那么灵活,不过也可以实现基本的响应式,需要配合媒体查询来实现
例如:通过兼容不同的尺寸来,控制显示的效果,这种实现需要设计提前准备好不同屏幕下的适配方案

@media screen and (max-width: 600px) {
    ...
}

小结:这中方式实现的优点:兼容性好,对于需要兼容到ie6的用户,可以采用这种方案,缺点也很明显,不灵活,并且各个端的适配,需要通过媒体查询单独设置

方案二

通过flex布局来实现,这种方式实现起来就简单多了,现在很多app端适配,都是这么处理的
我们使用flex来实现上面的布局
html:

  <div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item item_none"></div>
    <div class="item item_none"></div>
    <div class="item item_none"></div>
    <div class="item item_none"></div>
    <div class="item item_none"></div>
    <div class="item item_none"></div>
    <div class="item item_none"></div>
  </div>

css:

   .box {
      width: 800px;
      margin: 0 auto;
      background: orange;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .item {
      width: 144px;
      height: 150px;
      background: #efefef;
      margin-bottom: 20px;
    }
    .item_none {
      width: 144px;
      height: 0;
      padding: 0;
      line-height: 0;
    }

说明:通过flex布局,实现的关键的属性,主要是flex-wrap: wrap; justify-content: space-between;
关键属性说明:

名称解释
flex-wrap: wrap换行
justify-content: space-between两端对齐

可能有人会疑惑在最后边多了几个标签
企业微信20220408-130103@2x.png
这个是用来实现最后一行不满一行的,并且要左对齐的的关键布局,而他们的高度都是0,也不会影响到页面整体的布局

flex兼容性
764697435.png
兼容来说,基本所有的平台都已经支持,只有少部分ie有兼容问题

方案三

通过字体两端对齐的方案来实现
这种实现方案,需要我们把每一个元素,都当成一个字体,通过text-align: justify;来实现两端对齐。
实现方案:
html:

  <div class="box">
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item"></span>
    <span class="item item_none"></span>
    <span class="item item_none"></span>
    <span class="item item_none"></span>
    <span class="item item_none"></span>
    <span class="item item_none"></span>
    <span class="item item_none"></span>
    <span class="item item_none"></span>
  </div>

css:

   .box {
      width: 800px;
      margin: 0 auto;
      background: orange;
      word-break: break-all;
      text-align: justify;
      line-height: 0;
    }
    .item {
      display: inline-block;
      width: 144px;
      height: 150px;
      background: #efefef;
      margin-bottom: 20px;
    }
    .item_none {
      width: 144px;
      height: 0;
      padding: 0;
      line-height: 0;
    }

说明:通过把元素属性修改成行内块元素,从而,是他具有行内元素的舒心,并通过text-align: justify;来让他和字体一样,实现两端对齐。并且兼容所有浏览器。
可以看出这里布局和flex的布局基本一致,除了吧div标签替换为span标签,特别说明一下,ie浏览器中检测很严格,块级别的元素即使设置的display: inline-block;也不会生效,需要特别注意。

对比

名称兼容性灵活性扩展性
方案一
方案二
方案三

总结

如果对兼容性要求不是很高,建议使用flex布局,如果要实现ie中的兼容建议,方案三,对于固定布局,可以考录方案一,如果有其他的方案,欢迎留言


Last modification:April 21, 2022
If you think my article is useful to you, please feel free to appreciate