Html CSS响应左右浮动（更改哪个div位于顶部）？

我正在做这个页面：

您将看到单词“test”位于左浮动的div中，而图像位于右浮动的div中

如果您调整它的大小，您将看到左浮动的div位于顶部，右浮动的div位于下方

你怎么能颠倒顺序呢？使左浮动的div低于右浮动的div。我所做的一切似乎都不管用

HTML:

---

将它们朝同一方向浮动

您可以交换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>

试验

test这个词在你的网站上出现了3次，让你很难理解你在说什么。您应该制作一个JSFIDLE来显示您的问题。您是否尝试过在HTML中将您的

banner\u left

放在

banner\u right

的下方？您只需交换HTML标记的顺序，它就可以正常工作。请看下面我的答案。另外，为了将来的参考，缩进您的代码可以更容易阅读和区分嵌套层Mastrianni-我怎样才能pm您或您可以给我您的联系信息？

<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>