3

I was wondering if it was possible to make my wrapper div scale around its floated child divs (.box) tightly when the browser is resized. At the moment, if the browser is resized the 4th div will go on to the next line however the wrapper div will stay the same size as though it is still there but I want it to scale down so it fits perfectly around the 3 divs left if that makes sense...How would I achieve this?

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;
}
4

3 回答 3

0

根据您的要求，您可以为此使用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/

于 2012-09-21T11:30:42.707 回答
0

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

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

于 2012-09-21T08:58:41.550 回答
0

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

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 */
}
于 2016-01-04T04:46:17.743 回答