制作div适合的内联块内容

Question

我如何制作div比例以适合其内容 - 如果该内容是内联块的集合？

我想这样做是为了使几行div居中，但最后一部分行与上面的那些左对齐。

#outer {
    border: 4px solid red;
    text-align: center;
}

#inner {
    display: inline-block;
    border: 4px solid blue;
    text-align: left;
}

.block {
    display: inline-block;   
    width: 150px;
    height: 100px;
    background-color: green;
    margin: 10px;
}

<div id="outer">
    <div id="inner">
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
</div>

Link to JSFiddle example

正如您从JSFiddle中看到的那样，蓝色内部div仍然像它的红色父级一样宽（尽管内联块本身并且它的内容没有填充它）。这会导致绿色块保持左对齐。

您可能需要调整JSFiddle输出的大小，以便在绿色块的右侧创建一些空格来测试它。

以下是大致应该如何看待（如果三行中有七个块）：

Answer 1

以下是一个示例，说明如何使其保持响应性并居中：

JS Fiddle

它使用基于框宽度的媒体查询：

@media only screen and (max-width: 1068px) {

    #inner {
        max-width: 866px;
    }
}
@media only screen and (max-width: 898px) {
    #inner {
        max-width: 692px;
    }
}
@media only screen and (max-width: 728px) {
    #inner {
        max-width: 518px;
    }
}
@media only screen and (max-width: 558px) {
    #inner {
        max-width: 344px;
    }
}
@media only screen and (max-width: 388px) {
    #inner {
        max-width: 170px;
    }
}

有点乏味，但只需要一点点数学就可以了。

它仅仅与display: inline-block合作的原因是因为当盒子换行时，蓝色div假设使用整个空间（左和右）。它并不了解包裹开始的地方。

Answer 2

由于您的块的和，并且在您的css中手动定义了边距，只需将您的div与id =“inner”设置为“520px”!!!