div中顯示的字換行：inline-block不起作用

我一直想弄清楚如何使用div元素製作4列的行。div中顯示的字換行：inline-block不起作用

第一和第三列應該是46px寬。第二列和第四列應該是左側50％（如100％窗寬-46 * 2）寬。我意識到，已經可以在第一個灰色框中看到here。

那麼，第二和第四列的文本可以更長，我希望它在div中打破。

第二個灰色方塊顯示了文本較長時的樣子。第三個灰色框向您展示另一個嘗試'display：table-cell'。唯一的問題是，第二列的50％的寬度恰好減小，而第四列的寬度增加。

我需要兩列具有相同的寬度。你有一個想法，我如何實現它？預先感謝您。

來源

2012-06-13 user1437032

這是你在找什麼？ http://jsfiddle.net/thirtydot/5p5V9/1/如果是這樣，讓我知道，我會張貼它作爲一個答案。 – thirtydot

正是我在找的東西。謝謝你一千次。 – user1437032

我決定改編你的display: table-cell版本。

最重要的變化是加入table-layout: fixed。 What that does同樣分配列間沒有指定的width的剩餘可用寬度。

參見：http://jsfiddle.net/thirtydot/5p5V9/2/

CSS：

.outer { 
    color: #ffffff; 
    background-color: #373737; 
} 

.inner { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 
.inner > div { 
    display: table-cell; 
} 
.alignC { 
    text-align: center; 
    font-weight: bold; 
    color: #949494; 
    background-color: #2e2e2e; 
} 
.first, .alignC { 
    width: 46px; 
    font-weight: bold; 
} 

.alignR, .alignL { 
    background: #666; 
}

HTML：

<div class="outer"> 
    <div class="inner"> 
     <div class="first">1</div> 
     <div class="alignR">r</div> 
     <div class="alignC">m</div> 
     <div class="alignL">This long text shall break in the div</div> 
    </div> 
</div>

Browser support for display: table-cell.

來源

2012-06-13 11:42:03 thirtydot

再次......謝謝。好想法。永遠不會自己弄明白。 – user1437032

這是一個不錯的選擇。性能的人一直建議不要使用表格元素（不是表格CSS特徵）。原因是它在所有行和單元格上的複雜百分比計算。此外，從技術角度來看，這不是一個好的演示/代碼/文檔的主意。那是我一直在閱讀和聽到的。渲染表格和表格單元所耗費的時間會降低性能（我的意思是使用元素）。我有經驗，並將其更改爲div的後，它運行良好。問題是...正在使用類似table，table-cell等風格的良好習慣？ w.r.t.標準，性能等...？ –

div中顯示的字換行：inline-block不起作用

回答

相關問題