3 sütun, esnek genişlikli orta sütun

Question

Üç bitişik divtan oluşan bir düzen oluşturmak istiyorum. Yan divler statik genişliğe sahiptir (javascript ile değişebilir) ve merkezi div kalan alanı doldurur. İlk div'in boyutu değiştiğinde, sadece merkezini etkiler. Üç sütundan oluşan tabloya (dinamik oluşturma ile) benzer.

Tamam, ama sorun nerede. Sorun şu ki, ilk sütuna yüzen sol div koyarsam ve ikinci ve üçüncü olandaki div'u engellersek, blok blokları garip bir şekilde davranır. Sütunlarında ilk sütundan kayan divın altında işlenirler.

Örnek. Birinci ve ikinci sütunda, yüzer div var ve üçüncü sütunda div'i engelle. Blok div yüzer divların yüksekliği etrafında aşağı kaydırılır. Merkez sütunundaki Div, y konumunda yalnızca solda kayan şamandıra kaymıştır.

Üç yerleşim sırasının her birinin birbirinden bağımsız olmasını isterim. Üçüncü sütundaki öğelerin neden ilk iki sütunda (float özelliği ile) div içinde yüzdüğü hakkında hiçbir fikrim yok.

KODU:

<div style="margin: auto; display: table; width: 260px;"> 
     <div style="display: table-row;"> 
      <div style="display: table-cell; width: 100px;"> 

       <div style="float: left; width: 40px; height: 50px;">COL1</div> 

      </div> 
      <div style="display: table-cell;"> 

       <div style="float: left; height: 50px; width: 40px;">COL2</div> 

      </div style="display: table-cell; width: 100px;"> 
      <div class="sideContainer"> 

       <div>COL3</div> 

      </div> 
     </div> 
</div> 

ve sonuç: result

düzeltmek nasıl. Tüm mizanpajların (sütunların) birbirinden bağımsız olması nasıl yapılır. Herhangi bir fikir?

Answer 1

Bunu, col1 ve col3 'ü sola ve sağa doğru sabit bir genişlikte olacak şekilde yapabilirsiniz.

Ardından, col1 ve col3'ün genişliğine eşit col2'ye bir sol ve sağ kenar boşluğu ekleyin.

Bu size üç sütun verir; col1 ve sağlanacak eni bir şekilde doldurma sabit bir genişliğe sahip olan ve col2 col3:

(mavi COL2 içerik kutusu ve sarı onun kenar)

<div class='container'> 
    <div class='right'> 
     col3 
    </div> 
    <div class='left'> 
     col1 
    </div> 
    <div class='middle'> 
     col2 
    </div> 
</div> 



.container { 
    overflow: hidden; 
} 
.right { 
    float: right; 
    width: 100px; 
} 
.left { 
    float: left; 
    width: 100px; 
} 
.middle { 
    margin: 0 100px; 
} 

Burada deneyin: http://jsfiddle.net/22YBU/

Ekrana ihtiyacınız varsa: tablo, ekran: tablo satırı ve görüntü: tablo hücresi, tablo kullanın ;-)