CSS 响应式左右浮动(更改哪个 div 位于顶部)? [英] CSS responsive float left and right (change which div goes on top)?

查看：15
本文介绍了CSS 响应式左右浮动(更改哪个 div 位于顶部)?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在处理此页面:http://www.insidemarketblog.com/test-4/

你会看到test"这个词在左边浮动的 div 中，图像在右边浮动的 div 中.

如果你调整它的大小，你会看到向左浮动的 div 位于顶部，向右浮动的 div 位于下方.

你怎么能颠倒这个顺序?因此，向左浮动的 div 低于向右浮动的 div.我所做的一切似乎都不起作用.

HTML:

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

CSS:

.main_header {背景:无重复滚动 0 0 #2B3443；边框:1px 实心#FFFFFF；高度:300px；边距:0 自动；溢出:隐藏；}.banner_left {向左飘浮;}.banner_right {浮动:对；}

解决方案

你可以调换 HTML 标签的顺序来达到想要的效果.

改变这个:

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

为此:

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

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆