灵活的宽度列

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