使用CSS動態分割/排（按百分比）佈局

我在想如果可能有多列分割佈局，其中每個浮動div的動態寬度爲100％/ n。使用CSS動態分割/排（按百分比）佈局

所以，如果我有以下結構

<div id="mycontainer"> 
    <div class="split"> 
     LOREM 
    </div> 
    <div class="split"> 
     IPSUM 
    </div> 
</div>

產生的CSS會是這樣的：

.split { 
    float: left; 
    width: 50%; 
} 

.split:last-child { 
    float: right; 
}

其中作爲

<div id="mycontainer"> 
    <div class="split"> 
     LOREM 
    </div> 
    <div class="split"> 
     IPSUM 
    </div> 
    <div class="split"> 
     DOLOR 
    </div> 
</div>

會導致

.split { 
    float: left; 
    width: 33.33%; 
}

等等。我更喜歡普通的CSS解決方案，我知道它一般可以用 ~~jQuery~~ 很容易實現。

來源

2013-07-10 Atrotygma

一個純CSS的解決辦法是假的我們DIV爲我們親愛的table ，但嘿，爲什麼不呢！這是一個有效的解決方案。

http://jsbin.com/amequw/1/edit

#mycontainer{ 
    background:#eee; 
    padding:10px 0; 
    display:table;  /* Fake :) */ 
    width:100%; 
} 
.split{ 
    background:#eee; 
    display:table-cell; /* Act! */ 
}

，這裏是一個演示一個.split少：

http://jsbin.com/amequw/2/edit

來源

2013-07-10 11:46:21

看來我需要一個聲明'display：table'的容器？這被認爲是良好的做法？因爲它感覺錯了...... – Atrotygma

使用display：table沒有任何問題，如果您關心的是支持，您可以查看：http://caniuse.com/css-table。當它適合我的情況時，我已經多次使用過它，並且它運行得非常好。 – Doidgey

@Atrotygma關於'table'沒什麼不好。這是一種像所有其他顯示器一樣的價值。唯一的區別是，它做的工作相當該死 –

如果您使用的是純粹的CSS解決方案，那麼您可能需要使用網格設置，如Foundation's，其中涉及使用預定義的類的組合來佈置元素。

來源

2013-07-10 11:43:37

退房Flexible boxes不知道如何支持的他們的時刻，但這個會做你想要什麼，或者display: table

來源

2013-07-10 11:44:52

好吧，顯然http://caniuse.com/#feat=flexbox – Atrotygma

太棒了！不知道它是如此廣泛的支持，只用於我的移動的東西:) –

不知道43％是部分支持，所以它沒有得到更大的支持。我希望它雖然 – Doidgey

-1

使用javascript/jQuery來算分裂

var numItems = $('.split').length; 

var percentage = 100/numItems; 

$(".split").css("width",percentage+"%");

我的號碼嘗試沒有經過測試的代碼，但也許值得一去

來源

2013-07-10 11:44:53

我認爲OP需要一個純粹的CSS解決方案。 – Timber

你可能會想要將最後一個元素的百分比「落地」到3/5/7物品等等，因爲浮點數只會*高於確切值。 –

是的，我收集了，雖然我會給選項 –

你可以只使用不同類twocolumn，threecolumn，fourcolumn等，所以你的CSS看起來像像這樣：

.column { float: left; } 
.column-right { /* Just in case */ } 

.twocolumn .column { width: 50%; } 
.threecolumn .column { width: 33%; } 
/* ... */

而且你的HTML一樣

<div class="twocolumn"> 
    <div class="column column-left">Split</div> 
    <div class="column column-right">Split</div> 
</div>

或

<div class="threecolumn"> 
    <div class="column column-left">Split</div> 
    <div class="column">Split</div> 
    <div class="column column-right">Split</div> 
</div>

來源

2013-07-10 11:48:56 Daniel

使用CSS動態分割/排（按百分比）佈局

回答

相關問題