CSS响应式布局浮动左右（更改哪个div在顶部）？

Question

我正在处理这个页面：http://www.insidemarketblog.com/test-4/ 您会发现单词“test”在左浮动的div中，而图像位于右浮动的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;
}

- user3117275

---

你的网站上出现了3次单词“test”，使人难以辨别你在谈论什么。你应该创建一个 jsFiddle 来展示你的问题。 - dezman

你尝试过在HTML中将banner_left放在banner_right下面吗？ - Tepken Vannkorn

你可以交换一下HTML标签的顺序，这样它就会按预期工作。请参见下面的答案。 - Mastrianni

同样，为了将来的参考，缩进您的代码可以使其更易于阅读和解密嵌套层。 - Jon P

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>

- Mastrianni

---

Mastrianni - 我怎么私信你或者你能给我你的联系方式吗？ - user3117275

Answer 2

将它们都浮动到同一个方向。

- Chris Pierce