SORU
12 Aralık 2012, ÇARŞAMBA


Nasıl alt-align bootstrap, sıvı grid element düzeni muyum

İki sütun ile bir satır var onda sıvı bir düzen Twitter bootstrap kullanıyorum. İlk sütun span normalde doldurmak istiyorum hangi içerik, bir yeri vardır. İkinci sütunda sadece bir düğme ve hizalamak hücreye göre ilk sütunu altına istediğim bir metin var.

İşte elimdekiler:

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

İstediğim şey şu:

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

Gördüm çözümleri bu ilk yayılma mutlak yükseklik ve pozisyon ikinci dilimi göreceli, ama çözüm nerede bilmiyordum belirtmek mutlak yüksekliği benim divs olurdu tercih. Ayrıca, aynı etkiyi elde etmek için nasıl tam bir yeniden düşünmeye açığım. İskelenin bu kullanmak için evli değilim, bana en mantıklı görünüyordu.

Turp gibi bu düzeni:

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

CEVAP
8 Ocak 2013, Salı


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

//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() {
    $(this).css('margin-top', $(this).parent().height()-$(this).height())
});

Artı tarafta:

  • Bootstrap's existing helper classes, ruhu sınıf pull-down Adını verdim.
  • elde olan tek unsur" kabul edilmesi gerekiyor,... "çekti
  • ...farklı eleman tipleri (dıv, span, bölüm, s, vb) için yeniden kullanılabilir
  • adil-(tüm büyük tarayıcılar margin-top desteği) desteklenen

Şimdi kötü haber:

  • bir WordPress kullanmak gerekir
  • olarak yazılmış, duyarlı (üzgünüm) değil

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Absolute Zero(Programming Tutorials)

    Absolute Zer

    22 Kasım 2012
  • DancingIsAPassion

    DancingIsAPa

    29 AĞUSTOS 2009
  • hytchme

    hytchme

    9 Mart 2014