立即将父 div 包裹在浮动的孩子周围

Question

我想知道在调整浏览器大小时是否可以使我的包装 div 围绕其浮动子 div (.box) 紧密缩放。目前，如果调整浏览器的大小，第 4 个 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;
}

Answer 1

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

这里我在你的 .box div 上使用了 float left：

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

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

我在您的标记中添加了一个 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/

Answer 2

根据您的要求，您可以为此使用 mediaquery。像这样写

@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/

Answer 3

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

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