实现两端对齐是我们网页排版中经常使用到的一种布局,通过这篇文章总结一下常用的实现方法。
以三等分为例,我们实现的效果如下图:
我们的核心HTML
结构如下:
<div class="items">
<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>
复制代码
方法一:margin 负值
我们设子元素之间的间隔为 $padding
,通过给外层容器设置 margin-left: -$padding
和 width: calc(100% + #{$padding * 2})
来实现,核心代码(SCSS)如下:
$padding: 10px;
.items{
width: calc(100% + #{$padding * 2});
margin-left: -$padding;
}
.item{
width: calc((100% - #{$padding * 2}) / 3); // 3 等分
margin-left: $padding;
float: left;
}
复制代码
方法二:多列布局
利用多列布局,即 CSS3 增加的 column 属性,核心代码如下:
.items{
width: 100%;;
column-gap: 10px;
column-count: 3;
overflow: hidden;
}
复制代码
方法三:flex 布局
利用 flex 布局,给容器设置 justify-content: space-between;
即可,核心代码如下:
.items{
width: 100%;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
复制代码
方法四:视为内联元素
将子元素看做行内元素,即给子元素设置 display: inline-block
,再给父元素设置 text-align: justify
,这样子元素就自动等间距两端对齐了,无需计算子元素间的 margin 间距。 但是,此方法会遇到一个很恶心的问题,就是:inline-block 元素间的换行符空格间隙问题,来看看怎么解决这个问题,核心代码如下:
.items{
width: 100%;
text-align: justify;
overflow: hidden;
margin-top: 10px;
}
.items:after{
/* text-align-last:justify只有IE支持,标准浏览器需要使用 .demo:after 伪类模拟类似效果 */
display:inline-block;
overflow:hidden;
width:100%;
height:0;
content:'';
vertical-align:top;/* opera浏览器解决底部多余的空白 */
}
.item{
width: 30%;
display: inline-block;
}
复制代码