将父级div紧贴浮动子元素进行包裹

Question

我想知道是否有可能在浏览器调整大小时，使我的包装器div紧密地围绕其浮动的子div（.box）缩放。目前，如果调整浏览器大小，第四个div将转到下一行，但是包装器div将保持相同的大小，就好像它仍然存在，但我希望它能缩小，以便完美地适合剩下的3个div...我该如何实现这一点？

jsFiddle-http://jsfiddle.net/JCGj6/

<div class="showcase_wrapper">
   <div class="showcase" id="pt1">
      <div class="inner">
         <div class="box"> One </div>
         <div class="box"> Two </div>
         <div class="box"> Three </div>
         <div class="box"> Four </div>
      </div>
   </div>
</div>

.inner {
    position:relative;
}

.showcase_wrapper {
    margin:170px auto 0px auto;
    max-width:848px;
    position:relative;
}

.showcase {
    position:absolute;
    top:0;
    width:100%;
    min-width:424px;
    display:inline-block;
    white-space:normal;
    float:left;
    z-index:0;
    border:1px solid #ff0000;
    background:#ff000;
}

.showcase .box {
    position:relative;
    background:#ff0000;
    width:212px;
    height:173px;
    float:left;
    cursor:pointer;
}

- green_arrow

Answer 1

最近我遇到了这个问题，并且我想出了一种解决方案，它给人的印象是父元素包裹着它的子元素。

http://jsfiddle.net/partypete25/JCGj6/2/

.showcase_wrapper {
    overflow:hidden; /* hides the large bottom border on the bottom row applied on .inner */
    position:relative;
}
.inner {
  display:inline; /* only way to have the div 'hug' it's child elements */
  border-bottom:1000px solid red; /* Any large number will do, or you can make it more precise if you have a set height on your child divs. */

}
.showcase .box {
    background:orange; /*require a background colour otherwise the bottom borders appear from previous rows when items flow onto multiple lines */
    display:inline-block; /*required for it's parents 'inline' display to work effectively. make sure your markup is edited so there is no white space between items */
}

- partypete25

Answer 2

你需要清除浮动。并决定一种布局方法，使用定位或浮动，而不是两者都用。一个会抵消另一个。

在这里，我已经在你的.box div上使用了左浮动：

.inner {
    }

    .showcase_wrapper {
        margin:170px auto 0px auto;
        max-width:848px;
    }

    .showcase {
        top:0;
        width:100%;
        min-width:424px;
        display:inline-block;
        white-space:normal;
        float:left;
        z-index:0;
        border:1px solid #ff0000;
        background:#ff000;
    }

    .showcase .box {
        background:#ff0000;
        width:212px;
        height:173px;
        float:left;
        cursor:pointer;
}
span.clear
{
    display: block;
    width: 100%;
    clear: both;
}

http://jsfiddle.net/Kyle_Sevenoaks/NnZuR/

我已经删除了定位，因为使用float时不需要。

我在您的标记中添加了一个span.clear来清除浮动并使外部框架尊重内部元素的尺寸。有几种清除浮动的方法，我喜欢这种方法，因为具有span.clear既语义化又易于阅读 :)

---

盒子拉伸到外框是默认行为，最好使用一些JavaScript计算来完成。

$(window).resize(function() {
    var windowWidth = $(window).width();
    var actualWidth = $("#wrapper div").width();
    var calc = Math.max(actualWidth,Math.floor(windowWidth/actualWidth) * actualWidth);

    $("#wrapper").css({width: calc+"px"});
});

http://jsfiddle.net/Kyle_Sevenoaks/cq658/

- Kyle

---

以上方法似乎在 FireFox (Mac OSX) 上无法正常工作。红色边框仍然会尽可能地延伸到最远的位置，因为每个正方形都会掉落到下一行，而不是像 OP 要求的那样捕捉其内容子元素。 - Pebbl

即使我删除了最小宽度，也没有任何区别 :-/ - green_arrow

看起来这是默认行为。http://jsfiddle.net/Kyle_Sevenoaks/LRxr4/ 问题的提出者可能需要使用JS在任何给定时刻计算宽度并强制执行。 - Kyle

没错，这就是我的想法…你可以让一个元素完全展开或完全折叠…还没有软折叠的概念（目前）不使用JavaScript是不可能实现的。一旦他们最终决定采用flexbox，这可能会成为可能（如果真的发生）。 - Pebbl

是的，我一直在玩弄flexbox，它看起来很有前途。我想这里的答案是“不，还没有，抱歉。” - Kyle

Answer 3

根据您的要求，您可以使用媒体查询来实现此功能。写成这样：

@media all and (max-width: 848px) {
    .showcase .box{width:33.33%}
    .showcase .box:last-child{display:block;width:212px;float:none}
} 

请查看此链接 http://jsfiddle.net/NnZuR/1/

- sandeep