首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在div中包含每3个div

在div中包含每3个div,可以使用CSS的Flexbox或Grid布局来实现。以下是两种方法的示例代码:

  1. 使用Flexbox布局:
代码语言:html
复制
<!DOCTYPE html>
<html>
<head><style>
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 calc(33.333% - 20px);
  background-color: lightblue;
  margin: 10px;
  padding: 10px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
</div>

</body>
</html>
  1. 使用Grid布局:
代码语言:html
复制
<!DOCTYPE html>
<html>
<head><style>
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
}

.item {
  background-color: lightblue;
  padding: 10px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
</div>

</body>
</html>

这两种方法都可以实现在div中包含每3个div的效果,可以根据实际需求选择合适的方法。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

领券