一天，同事问我如果实现两段对齐的方式有几种呢？
我大概想了下说：有 5 种。
今天，抽空细想了下，发现不止 5 种呢！接下来一一为大家展示下。
具体效果可以看看这里
Demo
部分公共的样式
.demo,
h4 {
width: 80%;
margin: 0 auto 2em;
}
.demo {
border: 1px solid red;
padding: .5em;
}
h4 {
margin-bottom: .5em;
}
.inner-item {
border: 1px solid blue;
}
1.text-align: justify
<div class="text-align-justify demo">
<div class="inner-item">左边 div</div>
<div class="inner-item">右边 div</div>
</div>
/*text align justify */
.text-align-justify {
text-align: justify;
text-align-last: justify;
}
.text-align-justify .inner-item {
display: inline-block;
}
2.float
<div class="float demo">
<div class="fl inner-item">左边 div</div>
<div class="fr inner-item">右边 div</div>
</div>
/* float */
.float {
overflow: hidden;
}
.fl {
float: left;
}
.fr {
float: right;
}
3.负margin + float
<div class="negative-margin demo">
<div class="inner-item main">中间 div</div>
<div class="left inner-item">左边 div</div>
<div class="right inner-item">右边 div</div>
</div>
/* negative-margin */
.negative-margin {
height: 10vw;
}
.negative-margin .left,
.negative-margin .right,
.negative-margin .main {
float: left;
box-sizing: border-box;
}
.negative-margin .left,
.negative-margin .right {
background-color: #fff;
width: 20%;
}
.negative-margin .main {
width: 100%;
padding: 0 20%;
background-color: #ccc;
}
.negative-margin .left {
margin-left: -100%;
}
.negative-margin .right {
margin-left: -20%;
}
4.position
<div class="position pr demo">
<div class="pa left inner-item">左边 div</div>
<div class="pa right inner-item">右边 div</div>
</div>
/*position*/
.pr.demo {
height: 10vw;
}
.pr {
position: relative;
}
.pa {
position: absolute;
}
.pa.right {
right: .5em;
}
5.table
<div class="table demo">
<div class="inner-item">左边 div</div>
<div class="inner-item">中间</div>
<div class="inner-item">右边 div</div>
</div>
/* table */
.table {
display: table;
}
.table .inner-item {
display: table-cell;
}
6.flex
<div class="flex demo">
<div class="inner-item">左边 div</div>
<div class="inner-item">右边 div</div>
</div>
/* flex */
.flex {
display: flex;
justify-content: space-between;
}
7.column
<div class="column demo">
<div class="inner-item">左边 div</div>
<div class="inner-item">右边 div</div>
</div>
/* column */
.column {
column-count: 2;
}
8.grid
<div class="grid demo">
<div class="inner-item">左边 div</div>
<div class="inner-item">中间</div>
<div class="inner-item">右边 div</div>
</div>
/* grid */
.grid {
display: grid;
grid-template-columns: 20% calc(100% - 40% - 1em) 20%;
grid-row-start: 1;
grid-row-end: 3;
}
