2010-01-31 26 views
8

Farklı renkteki yan yana iki sütunum var. Arka planın da kendine özgü bir rengi var. Sağdaki sütun bilinmeyen bir boyuta genişleyecek metin içerir. Diğer sütun hiçbir şeyden çok az içerir.CSS Alternatif CSS-jQuery Koduna mı?

<div id="container"> 
    <div id="leftColumn"> 
     <p>Only one small paragraph here</p> 
    </div> 

    <div id="rightColumn"> 
     <p>Many large paragraphs inside here.</p> 
    </div> 
</div> 

Sol sütunun, sağ sütundaki kadar yüksek olmasını istiyorum.

İşte ... CSS

#leftColumn { 
    display:inline-block; 
    width: 200px; 
} 
#rightColumn { 
    display:inline-block; 
    width: 600px; 
    vertical-align: top; 
} 

Yani sayfa yüklendiğinde Birazdan sütunun yüksekliğine dayalı sol sütunun yüksekliğini ayarlamak için jQuery kullanırken.

$(document).ready(function() { 
    $('#leftColumn').css('height', $('#rightColumn').innerHeight()); 
}); 

Bunu yalnızca CSS ile yapmanın bir yolu var mı?

+0

CSS işi için tek bir araç olmayabilir bir prob Em. HTML Tabloları kötülük değildir; Geçmişte iyi CSS desteğinden önce geçmişte kullanılmış olsalar da, Tablolar hala yerlerine sahipler.Eşit yükseklikten bahsederken, Tablolar otomatik olarak buna sahiptir ve yine de her iki dünyanın en iyisini kullanan bir hibrid çözüm için CSS ile kontrol edilebilir. Aksi halde, bir aracı başkalarının çıkarları için kullanması durumunda karmaşık bir şekilde hızlı olabilir. –

+1

Daha sonra yazar sadece bir CSS çözümü istemişti, bu yüzden, ideallerimizi doğrudan soruyu yanıtlama sürecine dışlamak için ideallerimizi zorlamaya çalışıyor olabilir. –

cevap

4

Javascript kullanarak yanında bu düzeni sağlamak için birkaç başka yolları da vardır.

Yöntem şunları içerir:

  • ekran kullanılarak: her bir arka plan
  • kullanın için birden fazla div kaplar ekleme
  • (ana eleman üzerinde arka plan görüntüsü) elemanları üzerinde
  • Taklit sütun tablo tablo (açık nedenlerle çok popüler değil)

Bunların hepsi farklı avantajlara, dezavantajlara sahiptir ve her biri sitenin gelişimine kendi baş ağrılarını sunar. Hatalı sütunlar kullanmaya oy verdim, çünkü html'yi en basit ve tüm tarayıcılarla uyumlu tutuyor.

Ek okuma: diğer araçları daha iyi kendilerini borç zaman

+0

ekran kullanmak için eksileri nelerdir: bir div üzerinde tablo? –

+0

@Jitendra - IE 6/7 ekranı desteklemiyor: tablo. –

+0

Bu güzel seçenekler listesi için teşekkürler. Tasarımım için neyin en iyi olacağını düşünmek zorundayım. Seçenekler üç, iyi çalışabilecek bir şeye benziyor. Sahte sütunlar da iyi görünüyor, ancak IE ve diğer tarayıcılar arasındaki kutu modeli farkları ile ilgilenmek istiyorum emin değilim. – user182666

0

o <table>

+1

Tabular verileri görüntülemiyorsa, bu Kötü Fikir (tm) – rossipedia

+0

Downvoted (üzgünüm) çünkü bu kötü bir öneridir. – metrobalderas

+3

@Bryan Ross - Basit ve varolan bir araçla bir şey elde etmek için havada döngüler yapmak genellikle programlamada kötü bir fikirdir. Ayrıca, div'ler tablolardan bile daha az anlamlıdır. –

0

ile kolayca yapılabilir ben (belki CSS3 olarak) bunu yapmanın bir saf CSS yol varsa emin değilim. Ama bu makaleyi okumalı ve senin için çalışıp çalışmadığını görmelisin.

http://www.alistapart.com/articles/fauxcolumns/

Değilse, (saçma biçimlendirme bir LOT gerektirir) Bu tekniği düşünebilir.

http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm

+0

Neden düşüş var? Bu da ne? İkinci bağlantı için – jessegavin

+0

+1 .. çok saçma bir işaretleme yok .. sütun başına ekstra bir sarma div .. –

İlgili konular