将容器div的宽度与浮动div的和对齐 [英] Align width of container div to the sum of floating div

问题描述

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

main_container has an unfixed size, it's set as a percentage of the user resolution. I want sub_container to have the exact width of the sum of the floating div.

如果我使用display：table;对于sub_container和display：inline-block;对于浮动div，它工作正常：

If I use "display:table;" for sub_container and "display: inline-block;" for floating divs, it works fine:

，直到我在列表中有足够的div，以便宽度的总和大于main_container，它们在下一行中断开：

until I have enough div in the list, so that the sum of width is larger than main_container and they break on the next line:

>

但是，我想要subcontainer（黄色背景）永远是总和的EXACT WIDTH，即使他们在几行，例如：

But still, I want subcontainer (yellow background) to to be ALWAYS the EXACT WIDTH of the sum of the divs, even when they go on several lines, like this:

>

我已经搜索了几个小时了，并且找不到一个优雅的解决方案（只有css，如果可能。）

I've googled for hours now, and wasn't able to find an elegant solution (css only, if possible.)

这里是 jsfiddle ，来玩这个。

推荐答案

纯CSS解决方案

问题是，对于项目知道包装到下一行，容器必须填充水平空间，这是你的 .main_container width。但是你想要的背景不要超出实际元素本身所需要的。所以我已经使用元素自己创建背景与帮助伪造元素的帮助。

Pure CSS Solution

The problem is that for the items to "know" to wrap to the next line, the container has to have "filled" its available horizontal space, which is your .main_container width. Yet you want the background to not go beyond what is needed for the actual elements themselves. So I've used the elements themselves to create the background with the help of cobbled together pseudo-elements.

这是小提琴 （在Win9机器上在IE9，Firefox 18，Chrome 24中测试）

Here's the fiddle (tested in IE9, Firefox 18, Chrome 24 on a Win 7 machine)

我做的是将背景与每个 .floating 元素拼接在一起，这使得最右边的元素成为背景尺寸的右边框控件两个不同宽度的例子在小提琴）。

What I am doing is piecing together the background with each individual .floating element, which makes the right most element to be the right border control for the size of the background (note the two different width examples in the fiddle).

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

The explanation of each part is given in the comments below. There are a two key limitations to note:

1. .floating position 设置，因此是基于特定应用程序的潜在限制。


2. 背景需要是纯色或纯垂直导向的运动（即从上到下的渐变渐变，或水平线会起作用）。

1. The .floating cannot have a position set, so that is a potential limitation based on particular application.
2. The background needs to be either a solid color or purely vertical oriented "motion" (i.e. a gradient fading from top to bottom, or horizontal lines would work).

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

这篇关于将容器div的宽度与浮动div的和对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！