仅限 CSS：如何将 div 设置为其最大行的宽度，并将子代作为内联块？答案

【问题标题】：CSS only: how to make a div the width of its biggest row, with children as inline-blocks?仅限 CSS：如何将 div 设置为其最大行的宽度，并将子代作为内联块？
【发布时间】：2023-03-13 04:50:01
【问题描述】：

问题：

我想将包含的 div 居中，但我也想左对齐块。我认为弹性盒子可能是解决方案，但我不确定如何处理它们。我想这样做：

没有 Javascript
没有表格
不设置行宽（行宽必须是动态的。这就是本练习的目的）
不为容器设置宽度。（与设置行宽相同）
不添加不可见的 div。（与设置行宽相同）

示例，使用当前 CSS（尝试失败）：

.block {
 border  : 5px solid DarkRed;
 width   : 150px;
 height  : 150px;
 display : inline-block;
}
.container {
 display    : inline-block;
 text-align : center;
}

http://jsfiddle.net/SKRjG/

编辑：这是一个 Javascript 版本，显示它应该的样子： http://jsfiddle.net/SKRjG/8/

【问题讨论】：

Flexbox 无法做到这一点（参见：stackoverflow.com/questions/18218668/…）
@cimmanon：这有点不同！
不，不是。所需的视觉外观可能略有不同，但适用相同的限制。在这种情况下，Flexbox 与 text-align 一样有效。
有哪些限制？...“在这种情况下，Flexbox 与 text-align 一样有效。” : ???

标签： html css

【解决方案1】：

将您的 div 放入另一个容器中，使其看起来像

<div class="container">
  <div class="subcontainer">
    <div class="Block"></div>ETC
  </div>
</div>

然后使用@media 查询来更改 .subcontainer 的宽度，以使您的块适合完美的网格。然后将您的 .subcontainer div 居中，边距为：0 auto;

Css 可能看起来像：

.block {
 border  : 5px solid DarkRed;
 width   : 150px;
 height  : 150px;
 display : inline-block;
}
.subcontainer {
    text-align:left;
    margin:0 auto;
}
/*Three columns*/
 @media (min-width: 495px){
.subcontainer{width:495px;}
 }
/*Four columns*/
 @media (min-width: 660px){
.subcontainer{width:660px;}
 }
/*Five*/
@media (min-width: 825px){
.subcontainer{width:825px;}
 }

小提琴：http://jsfiddle.net/TM2wB/26/

【讨论】：

我认为这技术上是正确的，但不希望为每个列大小指定媒体查询。

【解决方案2】：

使用这个 CSS

.block {
 border  : 5px solid DarkRed;
 width   : 150px;
 height  : 150px;
 display : inline-block;
 float:left;
 clear:both;
}
.container {
 display    : inline-block;
 text-align :center;
 margin:0 auto;
}

【讨论】：

这不太好用。当隐含的空间节点被删除时，它的工作量会减少：jsfiddle.net/SKRjG/7
你不想使用容器的固定宽度吗？
嗯？检查小提琴。另外，看看这个：jsfiddle.net/SKRjG/8 这是一个 Javascript 解决方案。