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

【问题标题】：CSS responsive float left and right (change which div goes on top)?CSS 响应式左右浮动（更改哪个 div 在顶部）？
【发布时间】：2014-04-22 08:31:39
【问题描述】：

我正在处理这个页面：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;
}

【问题讨论】：

“test”一词在您的网站上出现了 3 次，让您很难理解您在说什么。您应该只制作一个 jsFiddle 来显示您的问题。
您是否尝试过将您的banner_left 放在 HTML 中的 banner_right 下方？
您只需交换 HTML 标签的顺序，它就会按预期工作。请参阅下面的答案。
也为将来的参考缩进你的代码可以更容易阅读和区分嵌套层

标签： html css responsive-design

【解决方案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 - 我怎么可以pm你或者你能给我你的联系方式吗？

【解决方案2】：

让它们朝同一个方向浮动。

【讨论】：