html - 孤立的内联 div

Question

我有一系列内联块 div，可以根据浏览器在给定时间的宽度换行到第二行。这是一个小提琴示例。例如，它可能看起来像这样：

但是，如果视口具有一定的宽度，则它的下一行可能只有一个孤立的内联块：

是否有一种 CSS 方法本质上是某种形式的“孤儿控制”（CSSorphan似乎不适用于这种情况），所以如果第二行的元素少于一定数量，它会包装更多他们在那儿把事情弄平？

.container {
    width: 100%;
}

.item {
    display: inline-block;
    width: 50px;
    background-color: blue;
}

<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>

标签： htmlcss

Answer 1

这是一个使用 CSS 网格的想法，其中诀窍是确保您的 div 的宽度表示为固定数量的倍数，以确保您永远不会有孤立元素。

.wrapper {
  --w: 100px; /* width of one item */
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(2*var(--w))); /* the item will break two by two*/
  justify-content:center;
}

.container {
  grid-column: 1/-1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.item {
  width: calc(var(--w) - 10px);
  margin: 5px;
}


/* irrelevant styles */

.container {
  counter-reset: num;
}

.item {
  height: 150px;
  background-color: blue;
  color: #fff;
}

.item::before {
  color: #fff;
  content: attr(class) " " counter(num);
  counter-increment: num;
}

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

如果我们使用3

.wrapper {
  --w: 100px; /* width of one item */
  display: grid;
  grid-template-columns: repeat(auto-fit, calc(3*var(--w))); 
  justify-content:center;
}

.container {
  grid-column: 1/-1;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}
.item {
  width: calc(var(--w) - 10px);
  margin: 5px;
}


/* irrelevant styles */

.container {
  counter-reset: num;
}

.item {
  height: 150px;
  background-color: blue;
  color: #fff;
}

.item::before {
  color: #fff;
  content: attr(class) " " counter(num);
  counter-increment: num;
}

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