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：

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

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

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

3 个答案: