使用內聯塊代替浮動塊的Css佈局

Question

如何使用inline-block而不是float來創建此佈局？
可以對HTML進行的唯一更改是#A和#B的順序。

http://jsfiddle.net/a2envebj/4/

的HTML：

<div id="root"> 
    <div id="A"></div> 
    <div id="B"></div> 
    <div id="C"></div> 
</div> 

的CSS：

* { 
    margin:0; 
    padding:0; 
} 
#root { 
    width:450px; 
    height:300px; 
    background-color: #CCC; 
} 
#A { 
    float: left; 
    width: 200px; 
    height:240px; 
    background-color: green; 
} 
#B { 
    float:left; 
    width: 200px; 
    height:120px; 
    background-color: yellow; 
} 
#C { 
    float: left; 
    width: 200px; 
    height: 120px; 
    background-color: orange; 
} 

Answer 1

標記：

<div id="root"> 
    <div id="A"></div> 
    <div id="C"></div> 
    <div id="B"></div> 
</div> 

個CSS：

* { 
    margin:0; 
    padding:0; 
} 
#root { 
    width:450px; 
    height:300px; 
    background-color: #CCC; 
} 
#A { 
    width: 200px; 
    height: 240px; 
    background-color: #008000; 
    display: inline-block; 
} 
#B { 
    width: 200px; 
    height: 120px; 
    background-color: #FF0; 
    display: inline-block; 
    margin-left: -4px; 
} 
#C { 
    width: 200px; 
    height: 120px; 
    background-color: #FFA500; 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    left: 200px; 
} 

不需要額外的標記 - 棘手的，我喜歡:)

Answer 2

這是否適合您的需要或沒有，但你必須要包住2小格，然後顯示這個新的DIV內嵌有較大的綠色DIV

http://jsfiddle.net/a2envebj/11/

由於我們使用內聯塊，我們必須除去的DIV之間的白色空間

<div id="root"> 
    <div id="A"></div><div id="wrap"> 
     <div id="B"></div> 
     <div id="C"></div> 
    </div> 
</div> 

渦卷{

width:200px; 
height:240px; 
background:#000; 
display:inline-block; 

}

A {

display: inline-block; 
width: 200px; 
height:240px; 
background-color: green; 

}

B {

display: block; 
width: 200px; 
height:120px; 
background-color: yellow; 

}

13 C {

display: block; 
width: 200px; 
height: 120px; 
background-color: orange; 

}