有明确的，但右侧的人多花车被留下的人

Question

推下来，我有这样的代码：

HTML：

<div class="left">left</div> 
<div class="left">left</div> 
<div class="left">left</div> 
<div class="right">right</div> 
<div class="right">right</div> 
<div class="right">right</div> 

CSS：

.left{ 
    float: left; 
    clear: left; 
    border: 1px solid blue; 
} 
.right{ 
    float: right; 
    clear: right; 
    border: 1px solid red; 
} 

的jsfiddle：https://jsfiddle.net/839okvsb/4/

左边的div是我期望它们的位置，但是正确的div在div 2之后开始从顶部开始。

这是为什么，我该如何解决这个问题？我完全无法理解为什么会发生这种情况。我不能将左边的div包含到一个巨大的div中，我需要将这些div分开（因为有时候，div1会是全角，有时候不会）。

编辑：我不能混合起来，你可以看到这里：https://jsfiddle.net/839okvsb/5/ /混合仍然不能解决问题。

edit2：我无法将它们打包在一个大格中，因为我需要它们能够执行此操作：https://jsfiddle.net/839okvsb/8/当我需要时。

Answer 1

由于您不能使用像这样的浮动左/右创建2“列”布局（即使您清除它们），您需要具有这样的标记，否则您会得到在您的问题中显示的结果因为这就是花车的工作原理。

.left{ 
 
    float: left; 
 
    clear: left; 
 
    border: 1px solid blue; 
 
    width: 48%; 
 
} 
 
.right{ 
 
    float: right; 
 
    clear: right; 
 
    width: 48%; 
 
    border: 1px solid red; 
 
}

<div class="left">left 1</div> 
 
<div class="right">right 1</div> 
 
<div class="left">left 2</div> 
 
<div class="right">right 2</div> 
 
<div class="left">left 3</div> 
 
<div class="right">right 3</div>

或包裹你的花车

.left{ 
 
    float: left; 
 
    clear: left; 
 
    width: 48%; 
 
} 
 
.right{ 
 
    float: right; 
 
    clear: right; 
 
    width: 48%; 
 
} 
 
.left .left{ 
 
    border: 1px solid blue; 
 
    width: 100%; 
 
} 
 
.right .right{ 
 
    width: 100%; 
 
    border: 1px solid red; 
 
}

<div class="left"> 
 
    <div class="left">left 1</div> 
 
    <div class="left">left 2</div> 
 
    <div class="left">left 3</div> 
 
</div> 
 

 
<div class="right"> 
 
    <div class="right">right 1</div> 
 
    <div class="right">right 2</div> 
 
    <div class="right">right 3</div> 
 
</div>

更新基于编辑/评论

如果左的和右的不始终左右，例如，当他们中的一个宽100％，这里是另一种选择，所有的左浮动

.left, 
 
.right { 
 
    float: left; 
 
    border: 1px solid blue; 
 
    box-sizing: border-box; 
 
    width: 48%; 
 
    margin-left: 4%; 
 
} 
 
.left:nth-child(1) { 
 
    width: 100%; 
 
    margin-left: 0; 
 
} 
 
.right { 
 
    margin-left: 0; 
 
} 
 
.right{ 
 
    border: 1px solid red; 
 
}

<div class="left">left 1</div> 
 
<div class="right">right 1</div> 
 
<div class="left">left 2</div> 
 
<div class="right">right 2</div> 
 
<div class="left">left 3</div> 
 
<div class="right">right 3</div>