Question

我想在同一行有3个div，在下一行有3个div。我怎么能这样做？

这是我到目前为止所做的：

＆＃13;

.wrapper {
  float: left;
}

.item {
  border: 2px solid black;
  width: 100px;
  height: 100px;
}

＆＃13;

<div class="wrapper">
  <div class="item"> test </div>
  <div class="item"> test </div>
  <div class="item"> test </div>
  <div class="item"> test </div>
  <div class="item"> test </div>
  <div class="item"> test </div>
</div>

＆＃13;

Answer 1

你可以这样做：

＆＃13;

body {margin: 0}

.wrapper {
  column-count: 3; /* three columns/divs per row */
  column-gap: 0; /* if you want to add some gaps between items */
  page-break-inside: avoid;
  break-inside: avoid-column;
}

.wrapper > .item {
  border: 2px solid black;
  width: 100px;
  height: 100px;
}

＆＃13;

<div class="wrapper">
  <div class="item"> test </div>
  <div class="item"> test </div>
  <div class="item"> test </div>
  <div class="item"> test </div>
  <div class="item"> test </div>
  <div class="item"> test </div>
</div>

＆＃13;

Answer 2

你应该看看Flexbox。您只需将display: flex设置为包装器，您就会看到子div如何开始定位自己。 Stackoverflow中有大量文档。只需看一看，看看它最终会变得多么容易。希望它有所帮助！

如何定位每行相同数量的div？

2 个答案: