使用内联块而不是浮点数的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

这是否适合您的需要，但您必须将2个较小的DIV包裹起来，然后使用较大的绿色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;

}

C {

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

}

Answer 2

标记：

<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;
}

不需要额外的标记 - 棘手的，我喜欢它：）