CSS 如何将div并排放置

在本文中，我们将介绍一些CSS技巧，帮助你将div并排放置。在网页设计中，经常会有需要将多个div并排展示的情况，比如制作导航栏或者图片墙等。下面我们将通过一些示例来学习如何实现这个效果。

阅读更多：CSS 教程

使用float属性实现div并排

float属性是CSS中一种用于浮动元素的属性，可以帮助我们实现div的并排布局。我们可以通过将div设置为float:left或float:right来实现左右并排放置。

.container {
  width: 100%;
}

.item {
  width: 50%;
  float: left;
}

上述代码中，我们先给容器容器(.container)设置了一个宽度为100%，然后给每个要并排放置的div(.item)设置了宽度为50%并且浮动到左边。这样就实现了将div并排放置的效果。

使用display属性实现div并排

除了使用float属性，我们还可以使用display属性来实现div的并排布局。display属性有多个值可以选择，其中常用的有inline-block和flex。我们可以根据需要选择不同的值来实现div的并排布局。

使用inline-block

.container {
  width: 100%;
}

.item {
  width: 50%;
  display: inline-block;
}

在上述代码中，我们将容器(.container)的宽度设置为100%，然后给需要并排的div(.item)设置了宽度为50%并且将display属性设置为inline-block。这样每个div都会像行内元素一样排列，并且并排放置。

使用flex布局

flex布局是CSS3引入的一种弹性盒子布局，通过设置flex属性可以很方便地实现div的并排布局。

.container {
  display: flex;
}

.item {
  flex: 1;
}

上述代码中，我们给容器(.container)设置了display:flex属性，这样子元素会自动并排放置。同时，我们给每个子元素(.item)设置了flex:1属性，这样每个子元素会均分容器的宽度，实现并排放置。

使用网格布局实现div并排

CSS网格布局是CSS3中引入的一种布局方式，可以非常方便地实现div的并排放置。

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}

.item {
  width: 100%;
}

在上述代码中，我们给容器(.container)设置了display: grid属性，表示使用网格布局。然后，我们使用grid-template-columns属性将容器划分为2列，并且每一列都平均占据容器的宽度。我们还可以使用grid-gap属性设置每个子元素之间的间距。最后，我们给每个子元素(.item)设置了宽度为100%。