Як вирівняти елементи сітки внизу в макеті рідини для завантажувача

Я маю текуче розташування за допомогою завантажувального пристрою Twitter, в якому я є ряд з двома стовпцями. Перший стовпчик містить багато вмісту, який я хочу нормально заповнити. У другому стовпчику є лише кнопка і текст, який я хочу знизу вирівняти відносно комірки в першому стовпчику.

Ось що я маю:

-row-fluid-------------------------------------
+-span6----------+ +-span6----------+
|                | |short content   |
| content        | +----------------+
| that           | 
| is tall        |    
|                |
+----------------+
-----------------------------------------------

Ось що я хочу:

-row-fluid-------------------------------------
+-span6----------+
|                |
| content        |
| that           | 
| is tall        | +-span6----------+    
|                | |short content   |
+----------------+ +----------------+
-----------------------------------------------

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

Цей макет як загадка:

http://jsfiddle.net/ryansturmer/A7buv/3/

Зверніть увагу: для користувачів Bootstrap 4+, будь ласка, врахуйте рішення Christophe (Bootstrap 4 представив flexbox, який передбачає більш елегантне рішення для CSS). Нижче буде працювати для більш ранніх версій Bootstrap ...

Дивіться 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())
});

З плюсу:

• в дусі існуючих помічників Bootstrap я назвав клас pull-down.
• потрібно класифікувати лише той елемент, який стає "збитий", так що ...
• ... це багаторазове використання для різних типів елементів (div, span, section, p тощо)
• він досить добре підтримується (усі основні браузери підтримують margin-top)

Тепер погані новини:

• для цього потрібен jQuery
• це не так, як написано, чуйно (вибачте)

Це оновлене рішення для Bootstrap 3 (хоча він повинен працювати і для старих версій), який використовує лише CSS / LESS:

http://jsfiddle.net/silb3r/0srp42pb/11/

Ви встановлюєте розмір шрифту 0 у рядку (інакше у вас з’явиться неприємний пробіл між стовпцями), потім вилучіть поплавці стовпців, встановіть показ inline-block, повторно встановите їх розмір шрифту, а потім vertical-alignможете встановити значення все, що вам потрібно.

Не потрібно jQuery.

Ви можете використовувати flex:

@media (min-width: 768px) {
  .row-fluid {
    display: flex;
    align-items: flex-end;
  }
}

Вам потрібно додати трохи стилю для span6, smthg, як:

.row-fluid .span6 {
  display: table-cell;
  vertical-align: bottom;
  float: none;
}

і це ваша загадка: http://jsfiddle.net/sgB3T/

Ось також директива 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);
        }
      };
    }

Просто встановіть батьків display:flex;і дитину margin-top:auto. Це розмістить дочірній вміст у нижній частині батьківського елемента, припускаючи, що батьківський елемент має висоту, більша за дочірній елемент.

Немає необхідності намагатися обчислити значення, margin-topколи у вас є висота батьківського елемента чи іншого елемента, більший, ніж дочірній елемент, який цікавить ваш батьківський елемент.

На основі інших відповідей тут ще більш чуйна версія. Я змінив версію Івана для підтримки вікон перегляду <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);

Це ґрунтується на рішенні cfx, але замість того, щоб встановити розмір шрифту нульовим у батьківському контейнері, щоб видалити проміжки між стовпцями, додані через дисплей: вбудований блок і потрібно їх скинути, я просто додав

.row.row-align-bottom > div {
    float: none;
    display: inline-block;
    vertical-align: bottom;
    margin-right: -0.25em;
}

до дівок стовпців для компенсації.

Ну, я не так, як будь-який з цих відповідей, моє рішення тієї ж проблеми в тому, щоб додати наступне: <div>&nbsp;</div>. Отже, у вашій схемі це виглядатиме так (більше чи менше), жодних змін стилю в моєму випадку не було потрібно:

-row-fluid-------------------------------------
+-span6----------+ +----span6----------+
|                | | +---div---+       |
| content        | | | & nbsp; |       |
| that           | | +---------+       |
| is tall        | | +-----div--------+|   
|                | | |short content   ||
|                | | +----------------+|
+----------------+ +-------------------+
-----------------------------------------------

.align-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
}