当元素下降到下一行时，如何增加“float：left”-elements的宽度？

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

通过使用伪选择器nth-child，您可以选择.footer-sections类的第4个子级，并在分辨率达到768px时使其宽度为100％。

Answer 2

你也可以使用.footer-section：last-child {width：100％}

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