使用内联块代替浮动块的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; 

}