4个div盒子显示两排两列

要将四个`<div>`盒子排列成两行两列，你可以采用CSS的Flexbox布局或者Grid布局来实现。这里我会分别给出两种方法：

1. **使用 Flexbox**:
首先，给包含这些div的容器设置display属性为`flex`，然后给每个div设置宽度相等，并设置flex-wrap属性为`wrap`以便它们换行。

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 选此项调整元素之间的间距 */
}

2. **使用 Grid**:
如果你的浏览器支持Grid布局，可以创建一个grid容器，设置行数和列数，然后将div作为网格单元格。

<div class="container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>

<style>
.container {
  display: grid;
  grid-rows: repeat(2, auto); /* 行数 */
  gap: 10px; /* 间隔大小可自定 */
}

相关问题

用flex布局使四个div成两行两列

好的，下面是使用flex布局实现四个div成两行两列的代码：

HTML代码：

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

CSS代码：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  margin-bottom: 10px;
}

这个布局将四个div放在一个父容器中，使用flex布局让子元素自动排列成两行两列，其中`flex-wrap: wrap`属性使元素自动换行，`justify-content: space-between`属性使元素在主轴上等间距分布，`align-items: center`属性使元素在交叉轴上居中对齐。

css一个盒子模型里放两列盒子

可以使用CSS的Flexbox布局来实现在一个盒子模型里放置两列盒子。以下是实现该布局的示例代码：

HTML:

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
</div>

CSS:

.container {
  display: flex;
}

.column {
  flex: 1;
  height: 200px; /* 设置高度 */
  margin: 10px; /* 设置外边距 */
  background-color: #ccc;
}

在以上示例代码中，`.container`元素使用`display: flex`属性来启用Flexbox布局。`.column`元素使用`flex: 1`属性来平均分配剩余的空间，从而实现两列盒子的布局。你可以根据需要修改`.column`元素的高度和外边距属性。