#html #css #zurb-foundation #vertical-alignment
#HTML #css #zurb-foundation #выравнивание по вертикали
Вопрос:
Мне нужно упорядочить динамическое количество изображений в сетке блоков Zurb Foundation, и каждое изображение имеет заголовок различной длины.
Мне было интересно, есть ли какой-нибудь способ выровнять все так:
Я смог выровнять все по низу: jsfiddle
ul.block-grid li {
display: inline-block;
float: none;
}
ul.block-grid li img {
vertical-align: baseline;
width: 100%;
max-width: 100%;
}
Но я не могу понять, как добиться желаемого выравнивания. Я пробовал абсолютное позиционирование заголовков, но затем они теряют свою ширину и высоту (и, конечно, положение в DOM): jsfiddle
ul.block-grid li p.caption {
position: absolute;
}
Любые советы по достижению этого выравнивания с благодарностью.
Комментарии:
1. Не думайте, что вы сможете с такой настройкой HTML.
2. Даже с помощью javascript?
3. Да, наверное .. не знал, что вы хотите найти решение с этим, вы должны пометить JavaScript в своем вопросе.
4. Вы действительно очень близки к своему абсолютному позиционированию. Вам нужно только определить элемент, относительно которого будет выполняться абсолютное позиционирование. Абсолютное позиционирование, выводящее ваши подписи из положения, связано с тем, что они позиционируются относительно элемента body . Добавление position: relative; к чему-то вроде LI укажет заголовкам позиционировать себя относительно LI, эффективно ограничивая область, в которой они располагаются.
5. Я бы также подумал, что сработает что-то такое простое, как установка фиксированной высоты заголовка, но у меня тоже возникли проблемы с этим: jsfiddle.net/waffl/hnNy5/10
Ответ №1:
Вы также можете реализовать этот макет с помощью таблиц CSS следующим образом.
Если HTML выглядит так:
<div class="row full-width">
<div class="columns small-12">
<ul class="block-grid small-block-grid-5">
<li>
<a href="#">
<img src="http://placehold.it/300x400" />
<p class="caption">Test caption</p>
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/300x400" />
<p class="caption">A longer test caption...</p>
</a>
</li>
...
</ul>
</div>
</div>
примените следующий CSS:
.row.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
ul.block-grid li {
display: inline-table;
float: none;
}
ul.block-grid li a {
}
ul.block-grid li img {
vertical-align: baseline;
width: 100%;
max-width: 100%;
}
ul.block-grid li p.caption {
text-align: center;
}
У вас достаточно хороший семантический HTML, поэтому есть с чем работать.
Внутри .block-grid содержащего блока установите display: inline-table на li элемент.
Вы можете установить vertical-align значение либо baseline или bottom , а затем при необходимости отрегулировать поля и отступы для дочерних элементов.
Этот CSS, похоже, хорошо работает с базовыми классами Zurb.
Смотрите демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/H5RLG /
Комментарий к дизайну:Если у вас слишком длинный заголовок, то между любыми двумя строками элементов будут очень большие области пробелов, но вы всегда можете добавить максимальную высоту p.caption и включить вертикальную прокрутку. В качестве альтернативы можно использовать JavaScript / jQuery и иметь расширяемую панель с кнопкой «Показать еще».
В Firefox результирующий макет выглядит следующим образом:
Комментарии:
1. Это работает очень хорошо! Из любопытства, есть ли какая-либо причина, кроме старой поддержки IE, не использовать строки таблицы? (сродни негативному отношению к использованию таблиц HTML для макета?) Есть ли какой-нибудь способ центрировать текст в
table-row?2. Таблицы CSS (с использованием свойства display) очень хорошо поддерживаются большинством современных браузеров. Ваш HTML сохраняет семантику вашей исходной разметки, что хорошо, а с помощью CSS вы получаете больше контроля над визуальным отображением макета, все вполне приемлемо. Негативное отношение к таблицам восходит к тем дням, когда макеты состояли из вложенных таблиц (с использованием table, tr, td и т. Д.) С разделителями GIF, Но мы давно прошли ту эпоху веб-разработки.
3. Большое спасибо, мне просто интересно узнать о последней части моего комментария, есть ли способ центрировать текст в
table-rowэлементе?4. Да, это правильно. Он центрирует текст только в том случае, если по какой-то причине он длиннее одной строки.
5. @waffl Я опубликовал вариант, который касается центрирования текста внутри
p.caption.
Ответ №2:
Это может быть достигнуто с помощью абсолютного позиционирования. Загвоздка здесь в переменной высоте ваших подписей… Вам нужно применить соответствующее нижнее поле к содержащему элементу строки, иначе подписи будут перекрывать все, что находится под ними.
Были изменены только следующие селекторы…
ul.block-grid li {
position: relative;
display: inline-block;
float: none;
}
ul.block-grid li a {
display: inline-block;
vertical-align: bottom;
width: 100%;
max-width: 100%;
}
.caption {
position: absolute;
top: 100%;
}
Чтобы ответить на ваш второстепенный вопрос о попытке абсолютного позиционирования, а текст теряет свою позицию. Причина, по которой абсолютное позиционирование работает в моем примере, заключается в том, что я установил <li> для элемента значение position: relative; This означает, что любые дочерние элементы LI, которые имеют абсолютное позиционирование, будут расположены относительно <li> , а не относительно <body> .
Комментарии:
1. Спасибо, Майкл, я согласился с другим ответом, потому что это позволило мне избежать необходимости устанавливать поля / высоту, чтобы избежать перекрытия.
2. @waffl Это, конечно, лучший ответ, я опубликовал это только для того, чтобы показать вам, что вы были близки к тому, что пытались.