html - 如何对齐多个 float 元素

Question

我想正确对齐两个元素(A 和 C):

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

我的样式表:

.a, .b {
    float: left;
    clear: left;
    width: 40%;
}
.c, .d {
    float: right;
    clear: right;
    width: 40%;
}

但是，这会导致:

我想像这样对齐 A 和 C:

说明问题的 JSFiddle:http://jsfiddle.net/foy79wz8/

有什么办法可以解决这个问题吗？

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

Answer 1

你可以

• 将.a和.b向左浮动
• 左清.b，为了防止和.a相邻
• 将 .c 和 .d 显示为内联 block
• 在包装器上使用 text-align: right，以便将 .c 和 .d 右对齐
• 在元素上恢复 text-align: left。

body {
  text-align: right;
}
div {
  width: 40%;
  text-align: left;
  border: 1px solid;
}
.a, .b {
  float: left;
  clear: left;
}
.c, .d {
  display: inline-block;
}

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