Блог

Я хочу создать нижний колонтитул с 4 столбцами (разделами). Каждый раздел имеет следующие стили:

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

Как вы можете видеть, я хочу сделать адаптивный дизайн. Когда ширина окна браузера становится маленькой, крайняя правая секция переходит на следующую строку.

Это то, что произойдет, но это НЕ то, чего я хочу достичь.

Моя цель — сделать ширину секций как можно больше. Чего я хочу, так это:

Проблема в том, что я не нахожу никакого способа сделать это без использования JavaScript. Я хочу сделать это только с помощью HTML и CSS.

Я пробовал width:auto , но это работает не так, как хотелось бы.

Я не могу придумать никакого обходного пути. Не могли бы вы, пожалуйста, протянуть мне руку помощи в этом вопросе? Есть предложения по решению?

Если вы всегда хотите расширить 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, вы выбираете 4-й дочерний элемент .footer-sections класса и увеличиваете его ширину на 100%, когда ваше разрешение достигает 768 пикселей.

Вы также можете использовать .footer-section:last-child{ширина: 100%}

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