9

我有以下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 和“显示：内联块；” 对于浮动 div，它工作正常：

在此处输入图像描述

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

在此处输入图像描述

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

在此处输入图像描述

我已经用谷歌搜索了几个小时，但无法找到一个优雅的解决方案（如果可能，仅限 css。）

这是jsfiddle，可以玩这个。

4

5 回答 5

5

纯 CSS 解决方案

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

这是小提琴（在 Win 7 机器上的 IE9、Firefox 18、Chrome 24 中测试）

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

每个部分的解释在下面的评论中给出。有两个关键限制需要注意：

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

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 */
}
于 2013-02-21T18:08:30.137 回答
2

重读你的问题......因为你不会承诺任何事情（最大宽度：80%、500px 等）我打破了第四个孩子的一切 - 根据你的例子。

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

在此处输入图像描述

于 2013-02-20T20:43:26.790 回答
2

我对此感到无聊，并创建了一个基于 jQuery 的 JS 脚本来解决它。

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

演示

于 2013-02-18T01:21:26.977 回答
0

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

.main_container {
    #width:380px;
}

.sub_container {
    #position: absolute;
}
于 2013-02-18T00:31:37.990 回答
0

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

.sub_container{background-color:yellow;}
于 2013-02-21T10:33:17.627 回答