灵活的宽度列

Question

只需要，比方说，3列将改变-可以多达4个都是灵活的宽度(填充屏幕)。

有没有办法用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

还有一个jQuery布局插件可能会满足你的需求，尽管它不仅仅是CSS：

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

Answer 3

你当然可以，

<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>

如果希望它们相同，则可以指定相同的高度。