css如何让三个div并排

如何让三个div并排

在网页设计中，许多情况下需要将多个元素水平并排，其中最常见的情况便是将三个div块元素并排。本文将深入讲述如何使用CSS来实现这个功能。

方法一：使用float属性

CSS的float属性可以让元素浮动到指定的方向，通常用于实现元素的九宫格布局效果。我们可以将三个div设置为float:left，即让它们在父元素中左浮动：

#box1, #box2, #box3 {
  width: 200px;
  height: 200px;
  float: left;
}

在这段代码中，我们将三个div的宽度都设置为200px，高度也都设置为200px，然后让它们分别浮动到左边。这样，它们就会被放置在同一行内：

然而，我们需要注意到的是，浮动元素脱离了文档流，可能会影响后面元素的布局，因此在使用浮动布局时，应该对后续元素进行清除浮动的处理：

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

将以上清除浮动代码应用到父元素中，即可避免布局被破坏：

这种方法可以在较为简单的场景中使用，但在一些复杂布局的情况下，会存在兼容问题，需要使用其他方式来实现。

方法二：使用display:inline-block属性

display:inline-block属性可以让元素具有行内块元素的特性，可以让元素直接并排摆放。我们可以将三个div设置为display:inline-block，然后添加字体大小为0的样式来避免多余的间距：

#box1, #box2, #box3 {
  width: 200px;
  height: 200px;
  display: inline-block;
  font-size: 0;
  *display: inline; /* 兼容IE6~7 */
  *zoom: 1; /* 兼容IE6~7 */
}

在这个例子中，我们将三个div的宽度和高度设置为200px，并将它们设置为行内块元素。这样它们就会在一行内排列，但由于行内块元素会产生排版间距，这里我们使用诡异属性样式的方式来消除这些间距，将字体大小设置为0：

但这种方法也有其缺点：元素为行内块元素时，元素之间如果有空格、换行符或者注释，都会产生额外的间隔，导致元素并不是严格的并列。我们可以在HTML代码中使用lists-save:0属性来避免这个问题：

以上代码中，将三个div的list-style属性的值设置为none，并通过设置margin-right样式为负值来清除间隔。这样三个div就可以完美的水平并排了。

方法三：使用flex布局

除此之外，我们也可以使用CSS3的flex布局来实现三个div水平并排。flex布局非常强大，可以轻松实现各种复杂的布局。使用flex布局时，我们只需要将三个div的容器设置为flex，并将其align-items属性设置为center，即可实现所有子元素在一行内居中对齐：

.container {
  display: flex;
  align-items: center;
}
.box {
  flex: 1;
  height: 200px;
  background-color: #bbb;
}

在这个例子中，我们首先将三个div的容器设置为flex，并将其align-items属性设置为center。这样，所有子元素就可以水平对齐并居中了。而我们将.box类中的flex属性设置为1，可以让三个div平均分配容器的宽度，从而恰好占据整个横向空间：

这种方法非常方便且易于实现，如果您的目标浏览器支持CSS3，则推荐使用。

总结

优缺点对比

通过以上三种方式，我们可以实现三个div的水平并排布局。它们各自有自己的优缺点，我们可以根据实际需要来选择合适的方法。

最佳实践

一般来说，在实际开发中，如果目标浏览器支持CSS3的flex布局，我们应该首选使用flex。如果兼容较低的浏览器需要使用float或inline-block布局，我们要注意清除浮动或空白间隔，避免出现布局异常。

如果需要实现更为复杂的布局，建议采用网格布局、bootstrap框架等工具来避免手写CSS代码繁琐和出错的风险。

补充：渐进增强和优雅降级

在实现页面布局时，我们需要保证布局基本功能的核心实现，同时对于不支持CSS新特性或老式浏览器提供适当的兼容方案，这种模式称之为渐进增强。优雅降级则是适用于在浏览器不支持某些新特性或者废弃某些功能时，能够优雅地退回到之前的兼容方案上。

在CSS布局中，当我们使用一些新的布局模式时，需要了解这些布局方式的兼容性，使用相应的hack或兼容代码，同时提前准备好使用渐进增强和优雅降级的原则来完成布局。

最终，我们应该遵循提供易用、可靠、高效和灵活的布局方式，以满足不同页面的开发需求，为用户提供优秀的用户体验。