Html 用于堆叠div列的纯CSS解决方案

我想在两个堆叠的div旁边向右浮动一个边栏div，两个div都向右浮动

您可以在此处找到代码：

我相信我可以通过将左div分组来实现这一点，但我想知道是否有更干净的方法

谢谢。

从css类中删除

“clear:All；”

。左，就可以了

新的 将class.left更新为“清除：左”

把你的右div放在第一位，如下所示

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

</div>

---

示例：

您能画一幅您希望它显示的图片吗？两个堆叠的DIV应该向右或向左浮动？它们是堆叠的，您的意思是跳过吗？OP想要垂直堆叠，而不是并排。

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

</div>

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

.content

{   
    Float:left;
    width:960px;
    height:100px;

}

.left
{
float:left;
width:40%;
height:100%;
background-color:red
}

.right
{
  float:left;
   width:20%;
  height:100%;
  background-color:yellow

}