Eşit yükseklikteki 2 sütun - Twitter'daki Bootstrap 2.0

Question

Twitter'da Bootstrap'in harika bir araç olduğunu ve benim gibi CSS hakkında henüz bir şey bilmeyenler için pek çok şeyi daha kolay hale getirdiğini herkes biliyor. Ama bazen de bir sorun olabilir.

Sorun şu ki: İki sütunlu, 940 piksel genişliğinde, 12 sütunlu sabit merkezli bir düzen kullanıyorum ve her iki sütunun da aynı yüksekliğe sahip olmasını istedim. Kod şu anda şu şekildedir: Gördüğünüz gibi

<div class="container"> 
    <div class="content"> 
     <div class="row"> 
      <div class="span8 div-content"> 
       <div class="center95"> 
        <div id="notWrap"> 
         <div id="not"> 
         </div> 
        </div> 
       </div> 
      </div> 
      <div class="span4 div-sidebar"> 
       <div class="center90"> 
        <div id="myPWrap"> 
         <div id="myP"> 
         </div> 
        </div> 
        <hr /> 
        <div id="otherPWrap"> 
         <div id="otherP"> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <footer id="bottom" class="footer"> 
     <p>&copy;</p> 
    </footer> 
</div> 

, "MYP", "otherP" ve "değil" gibi bir içeriğe sahip birer bölümdür vardır. Javascript ile doldurulurlar ve içerdikleri içerik miktarı değişebilir ve bu nedenle birçok kez bir sütun ("sütunlar" burada div tarafından "div-content" sınıfıyla ve div tarafından temsil edilir. "div-sidebar" sınıfı ile) diğerinden daha büyük olacaktır (Benim özel durumumda, her iki sütun da "büyük olan" olabilir). Temelde, sol kolon (kodda <div class="span8 div-content">) ihtiyacı

aynı sağ sütunda (kodda <div class="span4 div-sidebar">) büyüklüğü ve yardımcısı olmak: Eğer yardımı Burada

, bir resim versa. Ayrıca, eğer yardımcı olursa, sarı kısım <div class="content"> ve beyaz arka plan <div class="container">'dur. <div class="row">, yalnızca iki sütunun bir konteyneridir ve rengi yoktur.

"Aynı yüksekliğe sahip sütunlar" sorununun, web programcıları için yinelenen bir sorun olduğunu biliyorum, ancak şu ana kadar denediğim çözümler işe yaramadı. Gerçekten "Sahte Sütun Çözümü" ni beğenmedim çünkü CSS'de yeni bir kullanıcı olduğum için, bunun gibi bir geçici çözümü istemedim. Mümkünse, saf CSS'ye yapışmayı tercih ederim.

Şimdiden, yardım etmeye istekli olanlar için teşekkürler. benim için hep çalıştı

Answer 1

biridir: Ayrıca, bir masa col içine tabloya wrap ve #myP açmak için deneyebileceğiniz

#myPWrap,#otherPWrap { 
    overflow:hidden; 
} 

#myP,#otherP { 
    margin-bottom: -99999px; 
    padding-bottom: 99999px; 
} 

.

#myPWrap,#otherPWrap { 
display: table; 
} 

#myP,#otherP { 
display: table-cell; 
} 

Answer 2

Özel bir jQuery maksimum eklenti ile bu çözülebilir: Burada

$.fn.max = function(selector) { 
    return Math.max.apply(null, this.map(function(index, el) { return selector.apply(el); }).get()); 
} 

içerik kutu benim iç sütun elemanı, içerik kapsayıcıdır olan sütunları içeren sarıcı:

$('.content-box').height(function() { 
    var maxHeight = $(this).closest('.content-container').find('.content-box') 
        .max(function() { 
        return $(this).height(); 
        }); 
    return maxHeight; 
}) 

Bu yardımcı olur umarım.