我正試圖實現下圖中所示的內容。在網上找到幾個鏈接，其中有人建議使用表格單元格。試過了，但沒有得到確切的結果。有沒有更好的標準方法來實現這一點？請建議。合併行的Div標籤

嘗試代碼：

CSS

.left, .right{ 
    display:table-cell;

HTML

<div class=left> 
    <div> Cell A text ... </div> 
    <div> Cell B text ... </div> 
</div> 
<div class=right> 
    <div> Cell C text ... </div> 
</div>

Cell structure

來源

2014-03-19 Andy897

'display：table-cell'不能合併兩列。 – Era

你不能用浮動來實現這個嗎？ http://jsfiddle.net/89HWP/ – Andy

爲什麼不這樣做：

Demo Fiddle

HTML

<div class='table'> 
    <div class='cell'> 
     <div class='table'> 
      <div class='cell'>Cell A</div> 
     </div> 
     <div class='table'> 
      <div class='cell'>Cell B</div> 
     </div> 
    </div> 
    <div class='cell'>Cell C</div> 
</div>

CSS

.table { 
    display:table; 
    width:100%; 
} 
.cell { 
    display:table-cell; 
    border:1px solid black; 
    width:50%; 
    height:100px; 
    vertical-align:middle; 
}

來源

2014-03-19 12:11:05 SW4

我無法讓文字在中心垂直對齊。 –

看到這個小提琴：http://jsfiddle.net/tdYm5/1/ – SW4

這工作！ +1簡單和簡單的CSS。 –

右列vertical-align: middle;屬性添加到現有的解決方案。 Demo

來源

2014-03-19 12:18:25 Yasitha

合併行的Div標籤

回答

Demo Fiddle

相關問題