顯示內嵌塊

我需要這樣的創建佈局：顯示內嵌塊

 | two 
one ------- 
    | three

這裏是我的代碼：

<div class="group"> 
    <div class="name">one 
    </div> 
    <div class="con2"> 
     <div>two</div> 
     <div>three</div> 
    </div>  
</div>

的CSS：

div.group { 
    background-color: #093; 
} 

div.name { 
    background-color:#00F; 
    display: inline; 
} 

div.con2 { 
    background-color:#FF6; 
    display: inline; 
}

的jsfiddle：http://jsfiddle.net/mkurY/

來源

2011-12-13 demas

使用表，而不是 – Maheep

不該你是否考慮使用表格，如從你的圖表判斷，這是要做的語義正確的事情？

來源

2011-12-13 11:09:48 kolin

一無所知圖表明，一個表表達正確的語義。它只有三個單元格表明完全相反。 – Quentin

div.name { 
    background-color:#00F; 
    display: inline; 
    float:left; 
} 

div.con2 { 
    background-color:#FF6; 
    display: inline; 
    float:left; 
}

只需添加一個高度與一個一樣高，其他兩個區域，然後居中對齊文本

來源

2011-12-13 11:12:27

顯示：內聯+浮動：左是一個奇怪的組合 - 浮動將強制divs表現爲塊... /和對齊中心不會垂直工作 – ptriek

對不起，這是我的壞將是垂直對齊...至於浮動使divs表現爲塊元素我不知道 –

你可以使用表單元格屬性（僅針對IE8 +），並提供一個備用解決方案ie7-：

http://jsfiddle.net/mkurY/1/

來源

2011-12-13 11:13:51 ptriek

回落解決方案是什麼？ –

float：left + fixed height on both div divs，and skip the vertical alignment（或use padding-top to mimic vertical alignment） – ptriek

聽起來不錯，但他在他的div上有着臭名昭着的顯示內聯，所以他會陷入同樣的問題作爲我的解決方案，如果他希望他的內容是行內正確的？ –

您需要使用浮動的div.I在foll0wing鏈接 http://jsfiddle.net/mkurY/

已經更新了代碼210

來源

2011-12-13 11:16:54 kvc

我認爲你應該浮動你的div。 http://jsfiddle.net/zVjjM/

HTML

<div class="group"> 
    <div class="name">one</div> 
    <div class="con2"> 
     <div>two</div> 
     <div>three</div> 
    </div>  
</div>

CSS

div.group { 
    background-color: #093; 
    overflow: auto; 
} 

div.name { 
    background-color:#00F; 
    float: left; 
} 

div.con2 { 
    background-color:#FF6; 
    float: left; 
}

來源

2011-12-13 11:19:04 Filip

回答

相關問題