jquery - 立即将父级 div 包裹在 float 的子级周围

Question

我想知道当浏览器调整大小时，是否可以使我的包装器 div 围绕其 float 子 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;
}

Answer 1

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

这里我在你的 .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/

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

我在标记中添加了 span.clear 以清除 float 并使外框尊重内部元素的尺寸。有几种方法可以清除 float ，我更喜欢这种方法，因为有一个跨度。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/