У меня есть жидкая компоновка с использованием загрузочной щели Twitter, в которой у меня есть строка с двумя столбцами. В первом столбце много контента, которое я хочу заполнить обычно. Во втором столбце есть кнопка и некоторый текст, который я хочу выровнять по нижнему по отношению к ячейке в первом столбце.
Вот что у меня есть:
-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
| | |short content |
| content | +----------------+
| that |
| is tall |
| |
+----------------+
-----------------------------------------------
Вот что я хочу:
-row-fluid-------------------------------------
+-span6----------+
| |
| content |
| that |
| is tall | +-span6----------+
| | |short content |
+----------------+ +----------------+
-----------------------------------------------
Я видел решения, которые делают первый пролет абсолютной высотой и позиционируют второй диапазон по отношению к нему, но было бы предпочтительным решение, в котором мне не нужно было указывать абсолютную высоту моих div. Я также открыт для полного переосмысления того, как добиться такого же эффекта. Я не состою в браке с этим использованием лесов, это просто показалось мне наиболее удобным.
Этот макет как скрипка:
См. http://jsfiddle.net/jhfrench/bAHfj/ для рабочего решения.
//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
var $this = $(this);
$this.css('margin-top', $this.parent().height() - $this.height())
});
С положительной стороны:
pull-down
.Теперь плохая новость:
Это обновленное решение для Bootstrap 3 (должно работать только для более старых версий), которое использует только CSS/LESS:
http://jsfiddle.net/silb3r/0srp42pb/11/
Вы задаете размер шрифта 0 в строке (в противном случае у вас будет досадное пространство между столбцами), затем удалите столбцы с поплавками, установите отображение на inline-block
, заново установите их размер шрифта, а затем vertical-align
можно установить все, что вам нужно.
Не требуется jQuery.
div
для vertical-align: middle;
,
Вам нужно добавить стиль для span6
, smthg:
.row-fluid .span6 {
display: table-cell;
vertical-align: bottom;
float: none;
}
и это ваша скрипка: http://jsfiddle.net/sgB3T/
Вы можете использовать flex:
@media (min-width: 768px) {
.row-fluid {
display: flex;
align-items: flex-end;
}
}
Здесь также директива angularjs для реализации этой функциональности
pullDown: function() {
return {
restrict: 'A',
link: function ($scope, iElement, iAttrs) {
var $parent = iElement.parent();
var $parentHeight = $parent.height();
var height = iElement.height();
iElement.css('margin-top', $parentHeight - height);
}
};
}
На основе других ответов здесь представлена еще более отзывчивая версия. Я внес изменения с версии Ivan, чтобы поддерживать видовые экраны шириной < 768px и лучше поддерживать медленные изменения размеров окна.
!function ($) { //ensure $ always references jQuery
$(function () { //when dom has finished loading
//make top text appear aligned to bottom: http://stackoverflow.com/questions/13841387/how-do-i-bottom-align-grid-elements-in-bootstrap-fluid-layout
function fixHeader() {
//for each element that is classed as 'pull-down'
//reset margin-top for all pull down items
$('.pull-down').each(function () {
$(this).css('margin-top', 0);
});
//set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function () {
if ($(window).innerWidth() >= 768) {
$(this).css('margin-top', $(this).parent().height() - $(this).height());
}
});
}
$(window).resize(function () {
fixHeader();
});
fixHeader();
});
}(window.jQuery);
margin-top
на 0, а затем снова устанавливать его на новое значение? Кроме того, почему эти вещи в двух each()
циклах?
Это основано на решении cfx, но вместо того, чтобы установить размер шрифта в ноль в родительском контейнере, чтобы удалить промежутки между столбцами, добавленные из-за отображения: встроенный блок и наличие reset, я просто добавил
.row.row-align-bottom > div {
float: none;
display: inline-block;
vertical-align: bottom;
margin-right: -0.25em;
}
в столбцы divs для компенсации.
Просто установите родительский элемент display:flex;
, а дочерний элемент - margin-top:auto
. Это поместит дочерний контент в нижнюю часть родительского элемента, если родительский элемент имеет высоту, большую, чем дочерний элемент.
Нет необходимости пытаться вычислять значение для margin-top
, когда у вас есть высота на родительском элементе или другом элементе, который больше вашего дочернего элемента, представляющего интерес в вашем родительском элементе.
Ну, мне не понравился ни один из этих ответов, мое решение той же проблемы состояло в том, чтобы добавить это: <div> </div>
. Таким образом, в вашей схеме это было бы похоже (более или менее), никаких изменений стиля в моем случае не было:
-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
| | | +---div---+ |
| content | | | & nbsp; | |
| that | | +---------+ |
| is tall | | +-----div--------+|
| | | |short content ||
| | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------
добавить, если длина левой ячейки неизвестна?
.align-bottom {
position: absolute;
bottom: 10px;
right: 10px;
}