Önyükleme akışkan düzeninde ızgara öğelerini nasıl aşağıya hizalarım

Twitter'ın önyüklemesini kullanan akıcı bir düzenim var, burada iki sütunlu bir satırım var. İlk sütunda, aralığı normal olarak doldurmak istediğim çok fazla içerik var. İkinci sütunda yalnızca bir düğme ve ilk sütundaki hücreye göre alta hizalamak istediğim bir metin var.

İşte sahip olduğum şey:

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

İşte istediğim şey:

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

İlk aralığı mutlak bir yükseklik yapan ve ikinci aralığı ona göre konumlandıran çözümler gördüm, ancak div'lerimin mutlak yüksekliğini belirtmek zorunda olmadığım bir çözüm tercih edilirdi. Aynı etkiyi nasıl elde edeceğimi de tamamen yeniden düşünmeye açığım. İskelenin bu şekilde kullanılmasıyla evli değilim, bana en mantıklı geliyordu.

Bir keman olarak bu düzen:

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

Lütfen dikkat: Bootstrap 4+ kullanıcıları için lütfen Christophe'un çözümünü göz önünde bulundurun (Bootstrap 4, daha zarif bir yalnızca CSS çözümü sağlayan flexbox'ı tanıttı). Aşağıdakiler, Bootstrap'in önceki sürümleri için çalışacaktır ...

Çalışan bir çözüm için http://jsfiddle.net/jhfrench/bAHfj/ adresine bakın .

//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())
});

Artı tarafta:

• Bootstrap'in mevcut yardımcı sınıflarının ruhuna uygun olarak , sınıfı adlandırdım pull-down.
• yalnızca "aşağı çekilen" öğenin sınıflandırılması gerekir, bu nedenle ...
• ... farklı öğe türleri için yeniden kullanılabilir (div, span, section, p, vb.)
• oldukça iyi destekleniyor (tüm büyük tarayıcılar kenar boşluğunu destekliyor)

Şimdi kötü haber:

• jQuery gerektirir
• yazıldığı gibi duyarlı değil (üzgünüm)

Bu, yalnızca CSS / LESS kullanan Bootstrap 3 için güncellenmiş bir çözümdür (ancak daha eski sürümlerde çalışmalıdır):

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

Satırdaki yazı tipi boyutunu 0 olarak ayarlarsınız (aksi takdirde sütunlar arasında sinir bozucu bir boşluk kalırsınız), ardından sütun kayan karakterlerini kaldırırsınız, görüntüyü olarak inline-blockayarlarsınız, yazı tipi boyutunu yeniden ayarlarsınız ve ardından vertical-alignşu şekilde ayarlanabilir: İhtiyacınız olan her şey.

JQuery gerekmez.

Flex'i kullanabilirsiniz:

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

Bunun span6gibi smthg için biraz stil eklemelisin:

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

ve bu sizin kemanınız: http://jsfiddle.net/sgB3T/

İşte bu işlevi uygulamak için bir angularjs yönergesi de var

    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);
        }
      };
    }

Sadece ebeveyni display:flex;ve çocuğu olarak ayarlayın margin-top:auto. Bu, üst öğenin alt öğeden daha yüksek bir yüksekliğe sahip olduğunu varsayarak, alt içeriği üst öğenin altına yerleştirir.

margin-topEbeveyn öğenizde bir yüksekliğe veya ana öğenizdeki alt öğe öğenizden daha büyük başka bir öğeye sahip olduğunuzda bir değer hesaplamaya çalışmanıza gerek yoktur .

Buradaki diğer cevaplara göre daha duyarlı bir versiyon. Ivan'ın sürümünden <768px genişliğinde görüntü alanlarını desteklemek ve yavaş pencere yeniden boyutlandırmalarını daha iyi desteklemek için değişiklikler yaptım.

!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);

Bu, cfx'in çözümüne dayanmaktadır, ancak ekran nedeniyle eklenen sütunlar arası boşlukları kaldırmak için ana kapta yazı tipi boyutunu sıfıra ayarlamak yerine: satır içi blok ve bunları sıfırlamak zorunda kaldım, basitçe ekledim

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

telafi etmek için sütun divs.

Eh, ben yapmadım o cevapların hiçbirinde gibi aynı sorunun benim çözüm bu eklemek oldu: <div>&nbsp;</div>. Yani planınızda şöyle görünecektir (az ya da çok), benim durumumda hiçbir stil değişikliğine gerek yoktu:

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

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