如何擺脫浮動物品的容器右側的空白空間？

守則（http://jsfiddle.net/tombrito/gx7kL330/7/）：

.container { 
 
    background: blue; 
 
    position: absolute; 
 
    width: auto; 
 
} 
 
.floating-box { 
 
    float: left; 
 
    width: 150px; 
 
    height: 75px; 
 
    margin: 10px; 
 
    border: 3px solid #73AD21; 
 
}

<div class="container"> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
    <div class="floating-box">Floating box</div> 
 
</div>

...如果我調整窗口的大小，我看到容器的width: auto並不完全是內容的寬度：

右側有一些空白區域。有沒有辦法讓容器真的成爲浮動兒童的寬度，即使我調整它的大小？

來源

2016-04-07 Tom Brito

嘗試回答這個問題（http://stackoverflow.com/questions/18482505/having-the-floating-children-elements-determine-parent-width）但我認爲如果你有更多的元素讓它們纏繞，你會很困難...... – Stuart

如果你使用引導程序，那麼它會很容易，或者你可以爲它做一個jquery函數。 –

基本上...沒有。這不是線框模型的工作方式。 –

您可以使用flexbox規則。（source）

HTML：

<ul class="flex-container"> 
    <li class="flex-item">1</li> 
    <li class="flex-item">2</li> 
    <li class="flex-item">3</li> 
    <li class="flex-item">4</li> 
    <li class="flex-item">5</li> 
    <li class="flex-item">6</li> 
</ul>

CSS：

.flex-container { 
    padding: 0; 
    margin: 0; 
    list-style: none; 

    display: -webkit-box; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-flow: row wrap; 
    justify-content: space-around; 
} 

.flex-item { 
    background: red; 
    padding: 5px; 
    width: 200px; 
    height: 150px; 
    margin-top: 10px; 
    line-height: 150px; 
}

來源

2016-04-07 16:17:38

不...不是......你真的不能......甚至flexbox都無法做到這一點。這不是OP要找的。 –

這將分配空間中的框，但我真的想使容器很小，以適應內容的大小。無論如何，有趣的瞭解這個屬性... :) –

如果jQuery是一個選擇，我會做這樣的事情;

$('body').on('resize', function() { 
    var width = document.documentElement.clientWidth || window.innerWidth, 
     itemWidth = 150 + 20 + 6; //width + margin + border, 
     count = Math.floor(width/itemWidth), 
     containerWidth = itemWidth * count; 

    $('.container').css('width', containerWidth + 'px'); 
});

//未經測試的代碼警告

來源

2016-04-07 16:24:49 Failwyn

如何擺脫浮動物品的容器右側的空白空間？

回答

相關問題