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的宽度以使您的块适合完美的网格。然后使用margin：0 auto;

将.subcontainer div居中

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

仅限CSS：如何将div设为最大行的宽度，将子项作为内联块？

2 个答案: