Question

只需要3列[将会改变 - 可能最多4列]，这些列都是灵活的宽度（填充在屏幕上）。

有没有办法用CSS做这个？所以像三个街区一样，都是水平排列的，填满了屏幕。

Answer 1

还有一个jQuery Layout插件可能符合您的需求，虽然它不仅仅是CSS：

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

Answer 2

你的问题有点模糊。但是，简单的解决方案是：

编辑：Duh，忘了我的定位信息。

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

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

灵活的宽度列

3 个答案: