立即圍繞浮動的孩子包裝父div

我想知道是否有可能讓我的包裝div在瀏覽器調整大小時緊緊圍繞浮動子div（.box）。目前，如果瀏覽器被調整大小，第四個div將繼續到下一行，但是wrapper div將保持相同的大小，就像它仍然存在一樣，但是我希望它可以縮小，因此它完全適合左側3個div如果這是有道理的......我將如何實現這一目標？立即圍繞浮動的孩子包裝父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; 
}

來源

2012-09-21 green_arrow

你需要清除浮動。並決定佈局的方法，使用定位或 float，而不是兩者。一個會取消另一個。

在這裏，我已經使用浮動留在你的.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/

我已刪除的定位爲使用浮動時，它是沒有必要的。

我在標記中添加了一個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-21 08:58:41 Kyle

上面似乎未爲Firefox（蘋果OSX）工作。紅色的邊界框仍然延伸到最遠的地方，因爲每個廣場都落在下一行，而不是像OP要求的那樣捕捉它的內容孩子。 – Pebbl

即使我刪除最小寬度也沒有區別： -/ –

IT看起來像是默認行爲。 http://jsfiddle.net/Kyle_Sevenoaks/LRxr4/ OP可能需要使用JS來計算任何給定時刻的寬度並強制它。 – Kyle

根據您的要求可能是你可以使用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-21 11:30:42 sandeep

我已經遇到這個問題最近，我想我已經想出了一個解決方案，讓父元素環繞它的子元素的印象。

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-04 04:46:17 partypete25

立即圍繞浮動的孩子包裝父div

回答

相關問題