寬度可變的列

Question

例如，只需要3列[將會改變-最多4列]，它們都是靈活的寬度（填滿屏幕）。

有沒有辦法用CSS做到這一點？ 因此，就像三個都水平排列的塊一樣，填滿了屏幕。

Answer 1

還有一個jQuery Layout插件，它可能會滿足您的需求，盡管它不只是CSS：

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

Answer 2

您的問題有點含糊。 但是，簡單的解決方案是：

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

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

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