我正在这个页面上工作: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;
}
您可以交换 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>
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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)