Html 如何对齐多个浮动元素

我想正确对齐两个元素（A&C）：

<div>
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
    <div class="d">D</div>
</div>

然而，这导致：

我想像这样排列空调：

说明问题的JSFIDLE：

我有办法解决这个问题吗

---

注意：由于HTML代码是由第三方软件生成的，因此我无法更改元素顺序。我只能指定自定义CSS样式表。

尝试使用绝对值定位元素

这是我的密码：

body > div {
    overflow: hidden;
    background: #faf;
    width: 100%;
    height: 60px;
    position: relative;
}
.a, .b, .c, .d{
    position: absolute;
    width: 40%;
    height: 20px;
}

.a{
    top: 0;
    left: 0;
}
.b{
    left: 0;
    top: 20px;
}
.c{
    top: 0;
    right:0;
}
.d{
    top: 20px;
    right: 0;
}

看下面的小提琴

http://jsfiddle.net/foy79wz8/14/

代码片段如下，我稍微修改了布局

body>div{
溢出：隐藏；
背景：#faf；
}
a.b{
浮动：左；
清除：左；
宽度：40%；
}
c.d{
浮动：对；
清楚:对,；
宽度：40%；
}
.a{
背景：#美国联邦航空局；
}
.b{
背景：#ffa；
}
c{
背景：#afa；
}
博士{
背景：#aaf；
}
.inlinee{显示：内联块；浮点：左；宽度：50%；}

A.
B
C
D

给你。。。这很有效。。把代码抄下来。它可以完美地工作：

    body > div {
    overflow: hidden;
    background: #faf;
    width: 100%;
    height: 40px;
    position: relative;
}
.a, .b, .c, .d{
    position: absolute;
    width: 40%;
    height: 20px;
}

.a{
    top: 0;
    left: 0;
     background: #faa;
}
.b{
    left: 0;
    top: 20px;
   background: #ffa;
}
.c{
    top: 0;
    right:0;
    background: #afa;
}
.d{
    top: 20px;
    right: 0;
    background: #aaf;
}

*{
填充：0；
保证金：0；
框大小：边框框；
}
正文>div{
背景：#faf；
}
div>div{
显示：内联块；
垂直对齐：顶部；
填充：15px；
}
.a、.b{宽度：40%；}
.c、.d{宽度：40%；}
.a{背景：#faa；}
.b{背景：#ffa；}
.c{背景：#afa；}
.d{背景：#aaf；}
div>div:n个子项（偶数）{
左缘：20%；
}

ABCD

您可以使用javascript或JQuery进行更改，而无需修改html代码

• 向左浮动

  .a

  和

  .b

• 左清除

  .b

  ，以防止其与

  .a

• 将

  .c

  和

  .d

  显示为内联块
• 在包装上使用

  text align:right

  ，以便将

  .c

  和

  .d

  向右对齐
• 恢复元素上的文本对齐：左

正文{
文本对齐：右对齐；
}
div{
宽度：40%；
文本对齐：左对齐；
边框：1px实心；
}
a.b{
浮动：左；
清除：左；
}
c.d{
显示：内联块；
}

A
B
C
D

回答前仔细阅读问题。html元素的顺序无法更改。谢谢！有没有一种方法可以用CSS翻转B和C的位置？不幸的是，没有JavaScript可用。哇！这正是我想要的，非常感谢！

    body > div {
    overflow: hidden;
    background: #faf;
    width: 100%;
    height: 40px;
    position: relative;
}
.a, .b, .c, .d{
    position: absolute;
    width: 40%;
    height: 20px;
}

.a{
    top: 0;
    left: 0;
     background: #faa;
}
.b{
    left: 0;
    top: 20px;
   background: #ffa;
}
.c{
    top: 0;
    right:0;
    background: #afa;
}
.d{
    top: 20px;
    right: 0;
    background: #aaf;
}