CSS响应浮动左和右（更改div在顶部）？ [英] CSS responsive float left and right (change which div goes on top)?

问题描述

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

您会看到单词test位于左侧的div中，图片位于右侧的div中。

如果你调整它的大小，你会看到左边的div向上，右边的div向下。

如何反转该订单？所以div浮动的左边是下面的div浮动右边。我似乎没有什么工作。

HTML：

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

CSS：

 code> .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; 
} 
  

解决方案

更改：

 < div class =main_header> 
< div class =banner_left> 
< p>测试< / 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>测试< / p> 
< / div> 
< / div> 
  

I'm working on this page: http://www.insidemarketblog.com/test-4/

You'll see that the word "test" is in the div floated left, and the image is in the div floated right.

If you resize it, you'll see the div floated left goes on top, and the div floated right goes below.

How can you invert that order? So that the div floated left goes BELOW the div floated right. Nothing I do seems to work.

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

解决方案

You can swap the order of the HTML tags to achieve the desired effect.

Change this:

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

To this:

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

这篇关于CSS响应浮动左和右（更改div在顶部）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！