擴展，非固定寬度，四列布局

Question

我有一個950px寬的盒子。

在此框中，我想要最多四個可能的列。

當所有四列正在使用時，每列應該佔用大約25％的空間。

但是，當只有三個正在使用我希望他們擴大佔用33.33 ..％或當只有兩列正在使用我希望每個佔用50％，如果一個正在使用我希望它佔用100％的空間。

由於我試圖實現的動態性質，我不能使用標準的固定寬度四列布局。

貝婁是我迄今爲止取得的成就。這導致列堆疊在一起。正如我所說，我不能有任何固定寬度的列，因爲它們需要能夠依賴於它們中的內容來展開和摺疊。

.bottomboxwrapper { 
    width:950px; 
    display:block; 
    background-color:#6F0; 
    overflow:hidden; 
} 
.bottomone { 
    float:left; 
    background-color:#CCC; 
    width:auto; 
    display:inline-block; 
    width:auto; 

} 
.bottomtwo { 
    float:left; 
    width:auto; 
    background-color:#999; 
    display:inline-block; 
    width:auto; 

} 
.bottomthree { 
    float:left; 
    background-color:#666; 
    display:inline-block; 
    width:auto; 
} 
.bottomfour { 
    float:left; 
    background-color:#C99; 
    display:inline-block; 
    width:auto; 
} 


<div class="bottomboxwrapper"> 
<div class="bottomone"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p> 
</div> 
<div class="bottomtwo"> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p> 
</div> 
<div class="bottomthree"> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p> 
</div> 
<div class="bottomfour"> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit odio non diam varius quis mattis libero dignissim. Fusce auctor, turpis eget pretium euismod, tortor nulla eleifend nibh, sit amet blandit justo tellus non enim. Donec sodales ipsum et quam mattis quis tincidunt elit accumsan. Vestibulum dictum lorem ut purus congue vehicula. Quisque et dui non metus fringilla tempor. Fusce at nibh non lorem luctus ultricies sed at eros. Nullam cursus metus in leo tristique adipiscing. Proin volutpat orci eget massa blandit non sodales nulla rutrum. In id augue lacus. Quisque nec neque magna, a hendrerit augue. Suspendisse varius sapien sed neque accumsan volutpat. Sed arcu ligula, sagittis vel elementum vitae, scelerisque eget urna. Proin feugiat turpis at leo accumsan cursus. Nunc commodo, ligula vel posuere mollis, tortor purus blandit sem, id dignissim dui elit ut dolor. Cras tempus porttitor tortor, at hendrerit elit elementum eu. Nam mattis, lectus at bibendum tristique, tellus sapien gravida justo, at malesuada augue nibh nec sapien. 
</p> 
</div> 
</div> 

Answer 1

用CSS來做到這一點，最簡單的方法是使用display: table/display: table-cell。添加table-layout: fixedensures equal width columns。

這裏是你的HTML的例子：http://jsfiddle.net/thirtydot/N4BUh/（或fullscreen）

.bottomboxwrapper { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 
.bottomboxwrapper > div { 
    display: table-cell; 
} 

這一技術的唯一的缺點是在IE7是display: tableis not supported。

有可用的一個JavaScript填充工具，修復IE7：http://tanalin.com/en/projects/display-table-htc/

Answer 2

我認爲你能用CSS做的最多的事情就是將這些列嵌入到這樣的東西中。

.one .col { 
    width:100%; 
} 
.two .col { 
    width:50%; 
} 
.three .col { 
    width:33.33%; 
} 
.four .col { 
    width:25%; 
} 

到的缺點是你必須提前知道要多少列在像這樣的HTML調用類的名稱（或數量）...但至少你只需改變單班，「一」，「二」等

<div class="two"> 
     <div class="col">50% wide</div> 
     <div class="col">50% wide</div> 
    </div> 

    <div class="three"> 
     <div class="col">33.33% wide</div> 
     <div class="col">33.33% wide</div> 
     <div class="col">33.33% wide</div> 
    </div>