css div横向排列

在CSS中，如果你想让`<div>`元素水平排列，可以采用几种方式：

1. **浮动布局**（Float）：通过设置`float`属性，比如`float: left;`，可以让`div`元素向左自动排列，空出的地方会被其他同样设置了`float`的元素填充，形成一行横向显示。

.container {
  width: 100%; /* 或者自定容器宽度 */
}
.box {
  float: left;
  width: 50%; /* 根据需要调整宽度 */
  margin-right: 10px; /* 控制元素之间的间距 */
}

2. **Flexbox布局**：对于现代浏览器支持，可以使用`display: flex;`来轻松创建响应式的水平排列。只需给包含它们的容器添加`flex-direction: row;`即可。

.container {
  display: flex;
  flex-wrap: wrap; /* 如果元素超出容器宽度，则换行 */
}
.box {
  flex: 1; /* 自动分配空间，等宽 */
  margin: 10px;
}

3. **Grid布局**：另一种二维布局系统，适用于更复杂的网格结构。设置`grid-template-columns`可以指定列数或大小。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 自适应列宽 */
}
.box {
  grid-column: 1 / -1; /* 占据所有列 */
  margin: 10px;
}