一天，同事问我如果实现两段对齐的方式有几种呢？
我大概想了下说：有 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;
}
复制代码

总结

除了 grid 和 column 的兼容问题需要注意下，其它的几种方式基本都没什么使用障碍。

本文首发