Layout 使用内联块而不是浮动的Css布局

如何使用内联块而不是浮动来创建此布局？ 可以对HTML进行的唯一更改是A和B的顺序

HTML：

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

---

这是否适合您的需要，但您必须包装2个较小的DIV，然后将此新DIV与较大的绿色DIV内联显示

当我们使用内联块时，我们必须删除div之间的空白

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

}

A{ }

B{ }

C{ }标记：

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

---

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

你试过了吗？为什么需要进行更改？如果你问，你能用这个HTML构建这个布局而不使用任何浮动，并且只使用内联块，我会说不行。但是，这个答案可能对你没有帮助。你能再解释一下你想做什么吗，谢谢！构建布局是可能的，但只有通过修改标记来包装B&C-谢谢@Paulie_D-我已经尝试过了。。不，我不能包装它，在原始代码中我有更多的元素，出于语义原因以及jQuery调用，它们必须在同一个级别上。谢谢@MarcAudet，请阅读我对@Paulie_DThanks的回答，但是位置：absolute使内联块无用。。这正是我所需要的。你刚才没提到。还有其他限制吗？您可能需要求助于额外的包装器或一些js解决方案。干杯

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

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

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

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

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

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