Question

jsfiddle： http://jsfiddle.net/PTSkR/195/

我正试着让蓝色的小潜水一直坐在角落里，在红色下面，但在大蓝色的右边。如何实现这一目标？

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>

Answer 1

我建议您将red div和small blue div嵌套在自己的容器div中。

然后，将container div旁边的big blue 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>

http://jsfiddle.net/PTSkR/197/

Answer 2

虽然不清楚你想要什么，但我认为将clear：left属性添加到最后一个浮动div会给你想要的结果。类似的东西：

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

如何将浮动元素推到另一个浮动元素下面？

2 个答案: