Question

我在此页面上工作：http://www.insidemarketblog.com/test-4/

你会看到“＆＃34; test＆＃34;在div左边浮动，图像在右边浮动。

如果你调整它的大小，你会看到左边的div漂浮在顶部，而div漂浮在右下方。

你怎么能颠倒那个顺序？所以div漂浮在左下方，div向右浮动。我所做的一切似乎都无法发挥作用。

HTML：

<div class="main_header">
<div class="banner_left">
<p>test</p>
</div>
<div class="banner_right">
<img src="http://www.insidemarketblog.com/wp-content/uploads/2014/04/oz_main3.jpg">
</div>
</div>

CSS：

.main_header {
    background: none repeat scroll 0 0 #2B3443;
    border: 1px solid #FFFFFF;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
}
.banner_left {
    float: left;
}
.banner_right {
    float: right;
}

Answer 1

您可以交换HTML标记的顺序以达到所需的效果。

改变这个：

<div class="main_header">
<div class="banner_left">
<p>test</p>
</div>
<div class="banner_right">
<img src="http://www.insidemarketblog.com/wp-content/uploads/2014/04/oz_main3.jpg">
</div>
</div>

对此：

<div class="main_header">
<div class="banner_right">
<img src="http://www.insidemarketblog.com/wp-content/uploads/2014/04/oz_main3.jpg">
</div>
<div class="banner_left">
<p>test</p>
</div>
</div>

Answer 2

将两个方向浮动。

CSS响应浮动左右（改变哪个div在顶部）？

2 个答案: