我有以下的HTML：
<div class="main_container">
<div class="sub_container">
<div class="floating">wookie1</div>
...
<div class="floating">wookie5</div>
</div>
</div>
将其视为图库。
main_container的大小不固定，它被设置为用户分辨率的百分比。 我希望sub_container的宽度正好等于浮动div的总宽度。
如果我对sub_container使用"display:table;"，对浮动div使用"display: inline-block;"，那么它可以正常工作：
但是，我希望子容器（黄色背景）始终以div的宽度之和为准确宽度，即使它们跨越多行，就像这样：
我已经谷歌了几个小时，但是没有找到一个优雅的解决方案（如果可能的话只使用css）。
这里是jsfiddle，可以玩一下。
问题在于，要使项目“知道”换行到下一行，容器必须“填满”其可用的水平空间，即您的.main_container宽度。然而，您希望背景不超出实际元素所需的范围。因此，我使用元素本身通过拼凑伪元素来创建背景。
这是 jsfiddle 链接（在 Win 7 机器上测试了 IE9、Firefox 18 和 Chrome 24）
我正在使用每个单独的.floating元素拼凑背景，这使得最右边的元素成为背景大小的右边界控制（请注意 fiddle 中的两个不同宽度示例）。
下面的注释中给出了每个部分的说明。有两个关键限制需要注意：
.floating不能设置position，因此根据特定应用程序，这是一个潜在的限制。background需要是纯色或纯垂直定向的“运动”（即从上到下渐变的渐变或水平线条）。关键 CSS（带有说明性注释）
.sub_container {
border-left: 1px solid #333; /* forms its own left border */
overflow: hidden; /* needed for background and border to work */
position: relative; /* positioning background off this */
z-index: 1; /* needs a stacking context */
}
.floating {
font-size:20px;
line-height:30px;
padding:0 5px 0 5px;
border: 1px solid black;
margin: 3px;
display: inline-block;
/* NOTE: CANNOT be given positioning */
}
.floating:after {
content: '';
position: absolute; /* will position off subcontainer */
border-top: 1px solid black; /* makes the top/bottom border itself */
border-bottom: 1px solid black;
z-index: -1; /* push it to the background */
top: 0; /* set it to top of sub_subcontainer */
bottom: 0; /* set it to bottom of sub_container */
margin-left: -100%; /* shove it past the far left edge of sub_container */
/* next, use padding to bring it back to its position at the end
of the text string of .floating */
padding-left: 100%;
/* next, add enough padding on the right to compensate for the right
padding, right margin, and right border of .floating */
padding-right: 9px;
background-color: yellow; /* set your background color */
/* NOTE: this will not work with a background image that
has any horizonal differences to it (top to bottom
gradient would probably be okay) */
}
.floating:before { /* make right border */
content: '';
padding-top: 10000px; /* give it some obscene height that will not be exceeded */
margin: -5000px 0; /* counter the padding height by half size margins top/bottom */
/* next, push this behind the background with an even lower z-index
to hide it if it is not the right most element beign used to
form the right border */
z-index: -2;
border-right: 1px solid black; /* make the right border */
float: right; /* get the before element to the right */
position: relative; /* needs to be adjusted in position */
right: -9px; /* move it same as padding-right of the after element */
display: block; /* give it a display */
}
overflow-y吗？还是你想要两个方向都溢出（在这种情况下，我必须问，你想让里面的元素何时换行到新行）？ - ScottSsub_container上，以使其“适应”内容的宽度。此外，我发现这不允许将text-align:center放在包装元素上（但可以放在floating元素本身上）。这是已调整的fiddle链接。 然而，如果您只是想要对齐并居中，那么您实际上不需要您提出问题，所有的工作都白费了（几乎）。 - ScottS我尝试解决这个问题时感到有些无聊，于是创建了一个基于jQuery的JS脚本来解决它。
var t = $(".sub_container").width()/$(".floating").outerWidth();
$(".sub_container").width(parseInt(t) * $(".floating").outerWidth());
.main_container, .sub_container, .floating { outline:1px solid black }
.sub_container { background-color:yellow; display:table; padding-left:5px }
.floating {
float:left;
padding:5px;
margin:5px 5px 5px 0;
}
.floating:nth-child(4n+5) {
clear:left;
float:left;
}
HTML
<div class="main_container">
<div class="sub_container">
<div class="floating">wookie1</div>
<div class="floating">wookie2</div>
<div class="floating">wookie3</div>
<div class="floating">wookie4</div>
<div class="floating">wookie5</div>
<div class="floating">wookie6</div>
<div class="floating">wookie7</div>
<div class="floating">wookie8</div>
<div class="floating">wookie9</div>
</div>
</div>
编辑（选项2）
我不认为仅通过HTML/CSS就可以完成你想做的事情。我提供另一种解决方案，基于我的猜测...以及你的“图库评论”。
CSS
.main_container, .sub_container, .floating { outline:1px solid black }
.main_container {
text-align:center
}
.sub_container { background-color:yellow; display:inline-block; max-width:80%; }
.floating {
display:inline-block;
padding:5px;
margin:5px;
}
HTML
<div class="main_container">
<div class="sub_container">
<div class="floating">wookie1wookie1wookie1</div>
<div class="floating">wookie2</div>
<div class="floating">wookie3</div>
<div class="floating">wookie4</div>
<div class="floating">wookie5</div>
<div class="floating">wookie6wookie6</div>
<div class="floating">wookie7wookie7wookie7</div>
<div class="floating">wookie8</div>
<div class="floating">wookie9</div>
</div>
</div>
它不会使.subcontainer贴合内容; 然而，(使用max-width) 它允许您为其提供一些与主容器的间距，其子元素可以是各种尺寸。
.main_container {
#width:380px;
}
.sub_container {
#position: absolute;
}
.sub_container{background-color:yellow;}