如何在元素下降到下一行時增加「float：left」元素的寬度？

Question

我想創建一個包含4列（部分）的頁腳。每個部分都有這些風格：

.footer-sections { 
    width:24%; 
    min-width: 140px; 
    float:left; 
} 

正如你可以看到，這是一個負責任的設計，我想做的事情。當瀏覽器窗口的寬度變小時，最右邊的部分將下到下一行。

這是會發生什麼，但是這不是我想要完成的任務。

我的目標是使部分的寬度儘可能大。我想要的是：

問題是，我沒有找到任何方式來做到這一點，而不使用JavaScript。我只想用HTML和CSS來完成。

我試過width:auto，但它不能按要求工作。

我想不出有什麼辦法。 你能幫我借一下嗎？任何解決方案的建議？

Answer 1

如果它是第4列，你總是希望擴展，你可以做這樣的事情：

HTML

<div class="footer-sections"> 
    <p>Column 1</p> 
</div> 
<div class="footer-sections"> 
    <p>Column 2</p> 
</div> 
<div class="footer-sections"> 
    <p>Column 3</p> 
</div> 
<div class="footer-sections"> 
    <p>Column 4</p> 
</div> 

CSS

.footer-sections { 
    width:25%; 
    float:left; 
} 

@media (max-width: 768px) { 
    .footer-sections { 
     width: 33.33%; 
    } 
    .footer-sections:nth-child(4) { 
     width: 100%; 
    } 
} 

通過使用僞選擇器，第n孩子，你選擇第4個孩子.footer-sections類和使當您的分辨率達到768px時，其寬度爲100％。

Answer 2

你也可以使用.footer節：最後的孩子{寬度：100％}

.footer-section:last-child{ 
    width: 100% 
}