CSS otomatik taşıma konteyneri arasındaki boşluksuz: sol ve şamandıra: sağdan boşluklar

Question

CSS (3) için bir merkez kapsayıcı div genişliğini float:left div ve float:right div arasındaki otomatik olarak ayarlayabilmek için bir yol arıyorum.

Merkez div ayrıca, google + 'ya benzer, min-width kümesine de sahip olmak zorundadır. Bu, merkez içeriğin sol gezinme düğmeleri ve sağ sohbet bölmesi arasında otomatik olarak yerleştirildiği yerdir. Ardından ekran genişliği belli bir noktayı geçtiğinde (javascript ile algılanır), sohbet bölmesi yerden tasarruf etmeyi en aza indirir. ,

#left{ float:left; width:200px; height:400px; border:1px solid #000; } 

#center{ float:left; width:auto; height:400px; border:1px solid red; } 

#right{ float:right; width:100px; height:400px; border:1px solid blue; } 

daha fazla bilgiye ihtiyaç varsa bana bildirin lütfen: Ayrıca http://jsfiddle.net/9vrby/

, burada css şimdi kullanıyorum kodudur:

İşte iş yapmak için etkin bir sahte-up ve yardım için şimdiden teşekkürler.

Answer 1

#center'da float: left bırakın ve overflow: hidden'u ekleyin. Ayrıca, #center'un HTML'de devam etmesi gerekiyor.

http://jsfiddle.net/thirtydot/9vrby/14/

Bu, tüm modern tarayıcılar ve hatta IE7 çalışır.

Answer 2

Tek bir numara şamandıralar kullanmak değil, göstermektir: tablo hücresi.

http://jsfiddle.net/9vrby/8/

HTML:

<div id='left'></div> 
<div id='center'></div> 
<div id='right'></div> 

CSS:

#left{ display:table-cell; min-width:200px; height:400px; border:1px solid #000; } 
#center{ display:table-cell; min-width:200px; width:100%; height:400px; border:1px solid red; } 
#right{ display:table-cell; min-width:100px; height:400px; border:1px solid blue; } 

Ama dikkat, bu yöntem aşağıda IE7 (ve çalışmaz, ama kim hala bok doğru destekler?). Ama belki de, IE7 gibi resmi olarak desteklemeyen tarayıcılar için CSS (3) kullanmanızı sağlayan CSS3Pie'a bakabilirsiniz. Bu yüzden belki de görüntülenir: tablo hücresi çalışır.