html - CSS 响应式左右浮动(更改哪个 div 位于顶部)？

Question

我正在处理此页面:http://www.insidemarketblog.com/test-4/

你会看到“test”这个词在左边 float 的div中，图片在右边 float 的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>