Рубрики
FrontEnd

Урок: блоки одинаковой высоты на jQuery

Задача состоит в том, чтобы все блоки одного типа имели равную высоту.

Есть два правильных способа сделать блоки одинаковой высоты:

Рубрики
FrontEnd

Урок: блоки в одну строку CSS

Для того, чтобы выстроить блоки в одну строку с помощью CSS необходимо понимать, что выстраиваемые блоки представляют собой не просто какие-то разрозненные блоки, а группу. Понимая это необходимо объединить их. Объединение осуществляется с помощью заключения всех блоков в какой-то другой блок, который будет “родительским” по отношению к этой группе.

Рубрики
FrontEnd

Выравнивание – div блок по центру

Есть несколько правильных способов расположить div блок по центру. В данной статье будет описано три, наиболее распространенных.

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

Способ выравнивания №1 – не универсальный:

.var_1 {
    position: relative;
    height: 30px;
    background: #eee;
}
.var_1 > div {
    left: 50%;
    width: 500px;
    margin-left: -250px;
    position: absolute;
    background: #e99;
}

Минусы:

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

Способ выравнивания №2 – старинный:

.var_2 {
    position: relative;
    float: right;
    right: 50%;
    background: #e4e4e4;
}
.var_2 > div {
    position: relative;
    float: left;
    left: 50%;
    width: 500px;
    background: #ee9;
}

Минусы:

  • Необходимо использовать дополнительный внешний блок;
  • Необходимо использовать внешний вспомогательный блок, нейтрализующий влияние свойства float;
  • Дополнительный блок может испортить внешний вид.

Способ выравнивания №3 – лучший:

.var_3 {
    margin-left: auto;
    margin-right: auto;
    width: 500px;
    background: #9e9;
}

В данном примере минусов нет. Все аккуратно и быстро. Может возникнуть резонный вопрос –  что делать, если не известна ширина блока но надо расположить div блок по центру?

Все просто – нужно добавить свойство display: table; и проблема будет решена. Этот способ подходит, чтобы расположить любой div блок по центру, будь то меню, блок с контентом, изображение в виде блока и т.п.

Пример: выравнивание – div блок по центру с использованием всех способов: