将容器 div 的宽度与浮动 div 的总和对齐

Question

我有以下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 总和的确切宽度。

如果我使用“display:table;”对于 sub_container 和“显示：内联块；”对于浮动 div，它工作正常：

直到列表中有足够的 div，使得宽度的总和大于 main_container 并且它们在下一行中断：

但是，我仍然希望子容器（黄色背景）始终是 div 总和的确切宽度，即使它们分成几行，如下所示：

我已经在 Google 上搜索了几个小时，但无法找到一个优雅的解决方案（如果可能，只能使用 css。）

这是jsfiddle，可以玩这个。

Answer 1

纯 CSS 解决方案

问题在于，要“知道”到下一行的项目，容器必须“填充”其可用的水平空间，即您的.main_container 宽度。然而，您希望背景不超出实际元素本身所需的范围。所以我使用元素本身在拼凑的伪元素的帮助下创建背景。

Here's the fiddle（在 Win 7 机器上的 IE9、Firefox 18、Chrome 24 中测试）

我正在做的是将背景与每个单独的 .floating 元素拼凑在一起，这使得最右边的元素成为背景大小的右边框控制（注意小提琴中的两个不同宽度的示例）。

每个部分的解释在下面的cmets中给出。有两个主要限制需要注意：

1. .floating 不能设置 position，因此这是基于特定应用程序的潜在限制。
2. background 必须是纯色或纯垂直方向的“运动”（即从上到下渐变的渐变，或水平线都可以）。

关键 CSS（带有解释性 cmets）

.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 */
}

Answer 2

我厌倦了尝试这个并创建了一个基于 jQuery 的 JS 脚本来解决它。

var t = $(".sub_container").width()/$(".floating").outerWidth();
$(".sub_container").width(parseInt(t) * $(".floating").outerWidth());

Demo

Answer 3

重新阅读您的问题...因为您不会承诺任何事情（最大宽度：80%、500 像素等），我在第四个孩子身上破坏了一切 - 根据您的示例。

CSS

.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）它确实允许你从主容器中给它一些喘息的空间，它的子容器可以有各种大小。

Answer 4

删除主容器宽度和 .sub_container 绝对位置，你应该很高兴。

.main_container {
    #width:380px;
}

.sub_container {
    #position: absolute;
}

Answer 5

“sub_container”使用 span 元素而不是 div

.sub_container{background-color:yellow;}