如何对齐多个浮动元素

Question

我想正确对齐两个元素（A＆amp; 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＆amp; C是这样的：

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

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

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

Answer 1

你可以

• 向左浮动.a和.b
• 左清.b，以防止它与.a
相邻
• 将.c和.d显示为内联块
• 在包装器上使用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>

Answer 2

尝试使用绝对元素定位元素。

这是我的代码：

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

Answer 3

见下面的小提琴

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

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

body > div {
    overflow: hidden;
    background: #faf;
}
.a, .b {
    float: left;
    clear: left;
    width: 40%;
}
.c, .d {
    float: right;
    clear: right;
    width: 40%;
}
.a {
    background: #faa;
}
.b {
    background: #ffa;
}
.c {
    background: #afa;
}
.d {
    background: #aaf;
}
.inlinee{display:inline-block;float:left;width:50%;}

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

Answer 4

这里你去...这有效..只需复制此代码。它完美地运作：

if (amount >= 0.0) {
  showMessageDialog(amount);
} else {
  showMessageDialog('(' + Math.abs(amount) + ')');
}

https://jsfiddle.net/kamal1990/pz39a39c/

Answer 5

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body > div {    
    background: #faf;   
}

div > div{
    display: inline-block;
    vertical-align: top;
    padding: 15px;
}

.a, .b {width: 40%;}
.c, .d {width: 40%;}

.a {background: #faa;}
.b {background: #ffa;}
.c {background: #afa;}
.d {background: #aaf;}


div > div:nth-child(even){
    margin-left: 20%;
}

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

Answer 6

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