页面两端对齐布局，最全，最完整的方案

文章目录

前言
实现
- 方案一
- 方案二
- 方案三
对比
总结

前言

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

实现

方案一

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

假设：设计给的图纸和上面的一样，宽度为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	两端对齐

可能有人会疑惑在最后边多了几个标签

这个是用来实现最后一行不满一行的，并且要左对齐的的关键布局，而他们的高度都是0，也不会影响到页面整体的布局

flex兼容性：

兼容来说，基本所有的平台都已经支持，只有少部分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中的兼容建议，方案三，对于固定布局，可以考录方案一，如果有其他的方案，欢迎留言

我的博客地址

页面两端对齐布局，最全，最完整的方案相关推荐

chrome css两端对齐,两端对齐布局与text-align:justify
百分比实现首先最简单的是使用百分比实现,如下一个展示列表: .list{ width: %; background: #f0f0f9; list-style: none; font-size: ; ...
html中表格中字体两端对齐,CSS真正实现文字两端对齐布局
css实现文字两端对齐一直以来都是一个令人头痛的事情,我也是经常遇到这样的难题,这次抽点时间整理记录一下. 这里真正实现了文字两端对齐功能,下面是代码,其中上面一种使用的是表格布局,下面的是使用的DI ...
两端对齐布局与text-align:justify
百分比实现首先最简单的是使用百分比实现,如下一个展示列表: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta char ...
html语言两端对齐末行首对齐,css两端对齐之div+css布局实现2端对齐的4种方法总结...
div+css布局实现2端对齐是我们网页排版中经常会使用到的,这篇文章将总结一下可以实现的方法: html结构实现demo里面的div通过Css进行2端对齐. 1 2 3 1.margin负值的方式 ...
css英文左右对齐,中文英文左右padding一致两端对齐实现_js
先看下图: 就是一个定宽的容器,左右padding值20像素,结果输入一段文字后(有中文也有英文字符),会发现右侧根本就不对齐,有些地方距离右侧的空白大小也不是20像素,感觉不和谐,设计师就希望排列能 ...
html div如何列对其,CSS:自适应N列布局如何解决两端对齐
关于每行N列的这种布局,存在一个两端对齐的问题,因为每一列都会存在一个margin-left或者margin-right,导致最后一个超出父元素的边界. 通过一番努力,终于解决了这个遗留很久的问题,废 ...
vue垂直布局_基于 Flex 实现两端对齐垂直布局
一般来说布局我们都是水平布局,最多搞个垂直居中.而且对于一些 float . position 好像本身就不太适合垂直布局. 正好前段时间用 weex 做了一个页面,weex 天生基于 flex .且 ...
CSS用flex布局两端对齐，列不满左对齐
布局上要求两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的justify-content: space-between; 实现时发现最后一行不能左对齐,而是两端对齐方式. # 网上查了一 ...
flex布局两端对齐，不留空
方法一: flex两端对齐,每行四个. 弄个空的div,判断整除的结果来显示空div的个数 " Math.ceil ( num 必须是数字 / 4 ) " [一行4个,即除以4] ...

页面两端对齐布局，最全，最完整的方案

文章目录

前言

实现

方案一

方案二

方案三

对比

总结

页面两端对齐布局，最全，最完整的方案相关推荐

最新文章

热门文章