多个 div 彼此相邻 - CSS

在网页开发中，我们常常需要让多个 div 元素彼此相邻排列，从而达到一种布局效果。本文将介绍几种实现彼此相邻排列的 CSS 技巧。

1. 使用 float 属性

可以通过设置多个 div 的 float 属性为 left 或 right，来让它们彼此相邻排列。例如：

div {
  float: left;
}

这样设置后，多个 div 元素就会依次排列，直到排不下为止。

该方法的优点是简单易懂，适用于需要实现水平排列的元素。但是缺点也很明显，就是会破坏整体布局，容易出现元素重叠或位置偏移等问题。

2. 使用 display: inline-block 属性

另一种解决多个 div 彼此相邻排列的方法是使用 display: inline-block 属性。例如：

div {
  display: inline-block;
}

这样设置后，多个 div 元素也会依次排列。不同之处在于，使用 inline-block 属性的元素会保持块状的特性，同时又不会像浮动元素那样影响整体布局。

但是该方法也有一些缺点，比如设置后可能会出现元素间距不对齐的情况，还需要解决 inline-block 元素可能产生的空白间隙等问题，需要结合其他的 CSS 技巧来处理。

3. 使用 flexbox 布局

当我们需要对多个 div 元素实现更加复杂的布局时，可以使用 CSS3 的 flexbox 布局技术。flexbox 可以灵活地对多个元素进行排列，包括垂直和水平方向的排列、对齐等等。

.container {
  display: flex;
  justify-content: space-between;
}

上面的示例中，通过将父元素的 display 属性设置为 flex，就可以让多个子元素自动排列成一行。justify-content 属性可以控制子元素在行内的排列方式，space-between 表示让子元素平均分布在行内，同时两端与父元素之间的间距也相等。

flexbox 布局技术优点是可以对多个元素进行灵活的布局，缺点是需要掌握比较多的属性和技巧，并且不同浏览器的对 flexbox 的支持程度不一致。

结论

以上是几种常见的实现多个 div 彼此相邻排列的 CSS 技巧。不同的方法适用于不同的情况，需要根据具体的布局要求来选择合适的方法。在实际开发中，还需要注意浏览器的兼容性和不同布局方法的适用范围。