Bu soruna ortak bir çözüm mutlak konumlandırma veya kırpılmış şamandıralar kullanır, ancak sütunlarınız sayı + boyutta değişirse kapsamlı ayarlama gerektirmeleri ve "ana" sütununuzun her zaman en uzun olduğundan emin olmanız gerekir. Bunun yerine, üç daha sağlam çözümden birini kullanmanızı öneririm:
display: flex: bugüne kadar en basit ve en iyi çözüm ve çok esnek - ama IE9 ve üstü tarafından desteklenmiyor.tableveya display: table: çok basit, çok uyumlu (hemen hemen her tarayıcıda), oldukça esnek.display: inline-block; width:50% negatif bir kenar boşluğu kesmekle: oldukça basit, ancak sütun alt sınırları biraz zor.
1. display:flex
Bu gerçekten basittir ve daha karmaşık veya daha ayrıntılı düzenlere uyum sağlamak kolaydır - ancak flexbox yalnızca IE10 veya üstü tarafından desteklenir (diğer modern tarayıcılara ek olarak).
Örnek: http://output.jsbin.com/hetunujuma/1
İlgili HTML:
<div class="parent"><div>column 1</div><div>column 2</div></div>
İlgili css:
.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }
Flexbox çok daha fazla seçeneği destekliyor, ancak yukarıdaki sütunların yeterli sayıda olması yeterlidir!
2. <table>veyadisplay: table
Bunu yapmanın basit ve son derece uyumlu bir yolu kullanmaktır table- Eski IE desteğine ihtiyacınız varsa ilk önce denemenizi tavsiye ederim . Sütunlarla uğraşıyorsunuz; divs + şamandıralar bunu yapmanın en iyi yolu değildir (sadece css sınırlamalarını kesmek için iç içe div'ların birden fazla seviyesinin basit bir tablo kullanmaktan daha "anlamsız" olduğu gerçeğinden bahsetmiyorum). tableElemanı kullanmak istemiyorsanız , css'idisplay: table (IE7 ve üstü tarafından desteklenmez) düşünün .
Örnek: http://jsfiddle.net/emn13/7FFp3/
İlgili html: (ancak<table>bunun yerinebir düzkullanmayıdüşünün)
<div class="parent"><div>column 1</div><div>column 2</div></div>
İlgili css:
.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/
Bu yaklaşım overflow:hiddenşamandıralarla kullanmaktan çok daha sağlamdır . Hemen hemen istediğiniz sayıda sütun ekleyebilirsiniz; isterseniz otomatik ölçeklendirme yapabilirsiniz; ve eski tarayıcılarla uyumluluğu korursunuz. Şamandıra çözümünün aksine, önceden hangi sütunun en uzun olduğunu bilmenize gerek yoktur ; yükseklik iyi ölçeklendirir.
ÖPÜCÜK: özel olarak gerekmedikçe şamandıra kesmek kullanmayın. IE7 bir sorunsa, her gün bakımı zor, daha az esnek bir hile-CSS çözümü üzerinde semantik sütunları olan düz bir tablo seçerim.
Bu arada, düzeninizin duyarlı olması gerekiyorsa (örneğin, küçük cep telefonlarında sütun yok) @media, küçük ekran genişlikleri için düz blok düzenine geri dönmek için bir sorgu kullanabilirsiniz - bu, ister <table>başka bir display: tableöğe kullanın, ister işe yarar .
3. display:inline blocknegatif marj hack ile.
Başka bir alternatif kullanmaktır display:inline block.
Örnek: http://jsbin.com/ovuqes/2/edit
İlgili html: (divetiketlerarasında boşluk olmamasıönemlidir!)
<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>
İlgili css:
.parent {
position: relative; width: 100%; white-space: nowrap; overflow: hidden;
}
.parent>div {
display:inline-block; width:50%; white-space:normal; vertical-align:top;
}
.parent>div>div {
padding-bottom: 32768px; margin-bottom: -32768px;
}
Bu biraz zor ve negatif kenar boşluğu, sütunların "gerçek" tabanının gizlendiği anlamına gelir. Bu da, bu sütunların altına göre hiçbir şey konumlandıramayacağınız anlamına gelir, çünkü bu kesilir overflow: hidden. Satır içi bloklara ek olarak, şamandıralarla benzer bir etki elde edebileceğinizi unutmayın.
TL; DR : IE9 ve daha eski sürümleri yoksayabilirseniz flexbox kullanın ; aksi takdirde bir (css) tablo deneyin. Bu seçeneklerin hiçbiri sizin için işe yaramazsa, negatif kenar boşluğu kesmek vardır, ancak bunlar geliştirme sırasında kaçırılması kolay garip ekran sorunlarına neden olabilir ve bilmeniz gereken düzen sınırlamaları vardır.