- 可以使用弹性布局
<div class="box">
<div class="box-item">文字测试</div>
<div class="box-item">文字测试</div>
<div class="box-item">文字测试</div>
<div class="box-item">文字测试</div>
<div class="box-item">文字测试</div>
</div>
.box{
width: 100%;
height: 100px;
display: flex;
justify-content: space-between;
}
.box-item{
flex: 1;
background-color: #e3e3e3;
}
.box-item:nth-child(odd){
background-color: #d9d9d9;
}
image.png
若是需要元素宽度为内容宽度的话，将子元素的 flex:1; 去掉即可，图片如下图所示：
image.png
当然这个缺点比较明显，对于ie浏览器来说不是很友好，若是需要兼容ie浏览器的话，可以不使用以上弹性布局，可以使用下面这种新的方法
-
使用text-align:justify; 设置
首先说明一下 text-align:justify; 是css设置字体的两端对齐，效果图：
image.png
主要是为了让文字右侧填充在一条直线上，看起来更加美观
下面就开始怎么使用text-align:justify;进行两端对齐，
<div class="box">
<div class="box-item">
<div>文字测试1</div>
<div>文字测试2</div>
</div>
<div class="box-item">文字测试</div>
<div class="box-item">文字测试</div>
<div class="box-item">文字测试</div>
<div class="box-item">文字测试</div>
</div>
.box{
width: 100%;
height: 100px;
text-align: justify;
text-align-last: justify; /* 文本最后一行的对齐方式，主要是为了实现每行都是两端对齐 */
}
.box-item{
display: inline-block; /* 将元素设置为行内块元素 */
text-align: left; /* 需要重新设置文本对齐方向 */
text-align-last: left;
background-color: #e3e3e3;
}
.box-item:nth-child(odd){
background-color: #d9d9d9;
}
效果图如下：
image.png
我们发现文字不是从元素顶部开始我们就需要给子元素设置一个属性，vertical-align主要是设置文本的垂直对齐方向
.box-item{
display: inline-block;
text-align: left;
text-align-last: left;
background-color: #e3e3e3;
vertical-align: top;
}
image.png
当然我们将文本从底部开始对齐只需要将 vertical-align 属性值设置为bottom或者不进行设置即可
image.png
这种方法的优点就是可以兼容ie浏览器，但是只能兼容到ie8，再往下就不能实现了；
缺点就是写的css样式比较多，
当然大家可以对css中的text-align中justify属性值 以及vertical-align进行了解，当然有更多的方法，大家也可以分享出来
vertical-align 参考链接
以上就是我对css两端对齐的方法，大家可以参考一下！
