html表格行中的均勻間隔/可展開單元格

我希望一行固定大小的項目能夠水平均勻地分佈在我的頁面上。爲此，我使用html表格。目前我有一個表格，當頁面展開時單元格展開，這非常棒。然而，第一個元素始終對齊到左側，最後一個元素與右側邊界之間具有可擴展空間。我並不在乎父母的邊界與第一個和最後一個元素之間是否存在間隔，但我希望它們兩者都是相同的。html表格行中的均勻間隔/可展開單元格

enter image description here

http://jsbin.com/uZUBedA/2/

我缺少什麼？

CSS：

table { 
    border-collapse: collapse; 
    width: 100%; 
    text-align: center; 
    background: #AAAAFF; 
    padding: 12px; 
} 
tr { 
    background: #AAFFAA; 
} 
td { 
    background: #FF4444; 
    padding: 4px; 
} 
div { 
    background: #FFAAAA; 
    padding: 12px; 
}

HTML：

<table> 
    <tr> 
    <td><div style="width:400px">A large cell</div></td> 
    <td><div style="width:200px">A small cell</div></td> 
    <td><div style="width:100px">A smaller cell</div></td> 
    </tr> 
</table>

來源

2014-01-27 jozxyqk

爲了得到最右邊的單元格內的div右對齊添加margin-left:auto它：

<table> 
    <tr> 
     <td><div style="width:400px">A large cell</div></td> 
     <td><div style="width:200px">A small cell</div></td> 
     <td><div style="margin-left:auto; width:100px">A smaller cell</div></td> 
    </tr> 
</table>

來源

2014-01-27 02:29:22 bluefeet

很好很簡單，謝謝！如果所有的元素都是相同的大小，這看起來會造成不平衡的空間。爲所有div設置'margin：auto'，在任何地方都會產生空格（我的圖像中的情況二），這對我來說已經足夠了。 – jozxyqk

我建議你爲你的項目使用這個CSS框架。

http://www.blueprintcss.org/

來源

2014-01-27 02:35:30

如果你打算去那條路線，不妨考慮一下Twitter Bootstrap（我從來沒有聽說過blueprintcss！）：http：//getbootstrap.com/ – bluefeet

他沒有提及任何響應的事情 –

你是說事實上，引導程序是響應式的，（我從你的評論中假設）blueprintcss不是，意味着bootstrap不合適？這似乎不那麼真實。 – bluefeet

只是一個想法：

FIDDLE

HTML

<div class='numb'></div> 
<div class='numb'></div> 
<div class='numb'></div>

CSS

.numb { 
    height: 50px; 
    background-color: red; 
    margin-top; 30px; 
    float: left; 
} 
.numb:nth-child(1){ 
    margin-left: 10%; 
    width: 25%; 
} 
.numb:nth-child(2){ 
    margin-left: 5%; 
    width: 30%; 
    margin-right: 5%; 
} 
.numb:nth-child(3){ 
    width: 15%; 
    margin-right; 10%; 
}

您調整百分比，並確保它們的總和大約爲100.

要對IE8的問題做出響應。

.numb1 { 
    height: 50px; 
    background-color: red; 
    margin-top; 30px; 
    float: left; 
    margin-left: 10%; 
    width: 25%; 
} 
.numb2 { 
    height: 50px; 
    background-color: red; 
    margin-top; 30px; 
    float: left; 
    margin-left: 10%; 
    width: 25%; 
    margin-left: 5%; 
    width: 30%; 
    margin-right: 5%; 
} 
.numb3 { 
    height: 50px; 
    background-color: red; 
    margin-top; 30px; 
    float: left; 
    margin-left: 10%; 
    width: 15%; 
    margin-right; 10%; 
}

來源

2014-01-27 02:36:55 TimSPQR

請注意，IE8不支持'：nth-child'。 – bluefeet

非常有趣，謝謝。所以我想每個div都必須單獨設計。謝謝！ – TimSPQR

，或者使用[LESS]（http://www.lesscss.org/）來模板化你的CSS，這使得創建複雜的CSS和輸出向後兼容的CSS變得非常容易。 – bluefeet

html表格行中的均勻間隔/可展開單元格

回答

相關問題