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

Question

问题：

我想将包含的 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/

Answer 1

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

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

然后让@media 查询更改 .subcontainer 的宽度，以使您的块适合完美的网格。然后将您的 .subcontainer div 居中，margin: 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/

Answer 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;
}