Css 如何将浮动元素推到另一个浮动元素的下方？

jsfiddle:

.floated{
    background-color: blue;
    color: white;
    padding: 5px;
    float: left;
    display: block;
}

.big{
    height: 300px;
}
.with-padding{
    padding: 50px;
}
.yellow{
    background-color: red;
}

我试图让蓝色小跳水总是稳坐在角落里，在红色的下面，但在蓝色大跳水的右边。这是怎么做到的

CSS:

.floated{
    background-color: blue;
    color: white;
    padding: 5px;
    float: left;
    display: block;
}

.big{
    height: 300px;
}
.with-padding{
    padding: 50px;
}
.yellow{
    background-color: red;
}

HTML:

<div class='floated big'>FLOATED BIG</div>
<div class='floated with-padding yellow'>SHOULD BE NEXT TO FLOATED BIG</div>
<div class='floated'>push down</div>

浮动较大
应该是旁边飘大了
推倒

虽然不清楚您想要什么，但我认为在最后一个浮动div中添加clear:left属性将得到您想要的结果。比如：

.floated:last-of-type{
    clear:left;
}

---

我建议您将

红色div

和

蓝色小div

嵌套在它们自己的容器div中

然后，将

容器div

浮动到

蓝色大div

旁边

<div class='floated big blue'>FLOATED BIG</div>
<div class="floated">
  <div class='with-padding yellow'>SHOULD BE NEXT TO FLOATED BIG</div>
  <div class='blue'>push down</div>
</div>

浮动较大
应该是旁边飘大了
推倒

如果您需要“收缩包装”蓝色小div，可以将其浮动：

<div class='floated big blue'>FLOATED BIG</div>
<div class="floated">
  <div class='with-padding yellow'>SHOULD BE NEXT TO FLOATED BIG</div>
  <div class='floated blue'>push down</div>
</div>

浮动较大
应该是旁边飘大了
推倒

---

一张图片可能会让你更容易看到你拥有的东西&为什么它不是你想要的。@Okuma.Scott检查JSFIDLE，这就是我制作它的原因FIDLE很有用——但是一张图表或屏幕截图也会有所帮助。如果你可以轻松地将所有需要的东西直接放在上面，那么外部链接应该被阻止。