靈活的寬度列

Question

只需要，比如說3列[將會改變 - 可以達到4]，這些都是靈活的寬度（填滿屏幕）。

有沒有辦法做到這一點w/CSS？所以像三個塊一樣，全部水平排列，填滿屏幕。

Answer 1

你的問題是有點含糊。然而，簡單的解決方案是：

編輯：杜，忘了我的定位信息。

HTML

<div class="c1"></div> 
<div class="c2"></div> 
<div class="c3"></div> 

CSS

html, body { 
    height: 100%; 
    position: relative; 
} 

.c1 { 
    height: 100%; 
    width: 33.3%; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

.c2 { 
    height: 100%; 
    width: 33.3%; 
    position: absolute; 
    left: 33.3%; 
    top: 0; 
} 

.c3 { 
    height: 100%; 
    width: 33.3%; 
    position: absolute; 
    left: 66.6%; 
    top: 0; 
} 

注：有多種方法可以做到這一點。可以使用浮動塊，內嵌塊等。

Answer 2

肯定可以，

<style> 
.column1 { 
    float: left; 
    width: 33%; 
    height: 100%; 
} 

.column2 { 
    float: left; 
    width: 33%; 
    height: 100%; 
} 

.column3 { 
    float: left; 
    width: 33%; 
    height: 100%; 
} 

</style> 

<div class="column1"> 
    Col1 content 
</div> 
<div class="column2"> 
    Col2 content 
</div> 
<div class="column3"> 
    Col3 content 
</div> 

，如果你想他們是相同的，你可以指定相同的高度。

Answer 3

還有一個jQuery插件佈局可能適合您的需求，但它比CSS更多：

http://layout.jquery-dev.net/demos/accordion.html