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

Question

我想在两个堆叠的div旁边将一个侧边栏div浮动到右边，两个div都浮动到右边。

你可以在这里找到代码： http://jsfiddle.net/okcomputer82/ED4WJ/2/

我确信我可以通过分组左侧div来做到这一点，但我想知道是否有更清洁的方法。

感谢。

Answer 1

从css类.left中删除"clear: both;"，就可以了。

新 更新类.left到＆＃34;清除：左;＆＃34;

.left {
    float: left;
    clear: left;
    background: yellow;
}

并将您的右侧div放在第一位，如下所示

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

</div>

示例：http://jsfiddle.net/ED4WJ/5/

Answer 2

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

CSS

.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

}