html - 不需要的中心对齐

Question

我需要列出几个div具有display参数的部分inline-block。作为一个组，我需要他们在屏幕上居中，但我希望他们在需要“新行”时从该组的左侧开始。

这是一个非常简单的演示：https ://jsfiddle.net/fcdm56ra/

div.c1 {
  background: #fff;
  display: inline-block;
  text-align: center;
}

div.c2 {
  display: inline;
  text-align: left;
  align: left;
}

div.c3 {
  border-color: #0f0;
  border-style: solid;
  border-width: 3px;
  display: inline-block;
  margin: 5px;
  vertical-align: top;
}

<div class="c1">
  <div class="c2">
    <div class="c3">
      111111111111111111<br>abc
    </div>
    <div class="c3">
      22222222222222222
    </div>
    <div class="c3">
      3333333333333333
    </div>
    <div class="c3">
      444444444444444
    </div>
    <div class="c3">
      55555555555555
    </div>
    <div class="c3">
      6666666666666
    </div>
    <div class="c3">
      777777777777<br>def
    </div>
  </div>
</div>

它看起来像这样：

...但我希望它如下所示：

更理想的结果是让它像这样显示：

...其中“22222222222222222”块的高度自动调整为其行高，以匹配同一“行”中其他元素的高度。

---

重要的部分是，作为一个整体，它必须在屏幕上居中，并且c3类必须是inline-block.

我的代码有什么问题？

标签： htmlcss

Answer 1

你可以在这里使用 flexbox 和几个定义的最大宽度来实现这个结果：

div.c1 {
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 38ch;
}
div.c3 {
    border-color: #0f0;
    border-style: solid;
    border-width: 3px;
    margin: 5px;
    max-width: 18ch;
    vertical-align: top;
}

示例：https ://jsfiddle.net/pL2hog73/10/

更新

由于您不想使用 Max-Widths，您可以尝试使用网格方法。它与您的首选输出不完全匹配，因为列更加僵硬。

div.c1 {
    background: #fff;
    display: grid;
    margin: 0 auto;
    width: 50%;
}
div.c3 {
    border-color: #0f0;
    border-style: solid;
    border-width: 3px;
    grid-column: 1;
    margin: 5px;
    vertical-align: top;
    width: min-content;
}

div.c3:nth-child(even) {
    grid-column: 2;
}

https://jsfiddle.net/f1jt845a/1/

或者，您也可以只.c3保留 div ，然后在每两个之后width: min-content; display: inline插入一个。<br/>这将为您提供所需的左对齐，而无需处理网格/弹性框。