html一个div分成三块

可以使用flex布局或者grid布局来实现一个div分成三块的效果。

使用flex布局实现：

HTML代码：

<div class="container">
  <div class="block1">Block 1</div>
  <div class="block2">Block 2</div>
  <div class="block3">Block 3</div>
</div>

CSS代码：

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

.block1, .block2, .block3 {
  flex: 1;
  height: 100px;
  text-align: center;
  background-color: #ccc;
}

使用grid布局实现：

HTML代码：

<div class="container">
  <div class="block1">Block 1</div>
  <div class="block2">Block 2</div>
  <div class="block3">Block 3</div>
</div>

CSS代码：

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

.block1, .block2, .block3 {
  height: 100px;
  text-align: center;
  background-color: #ccc;
}