jquery - 向左浮动，然后在换行时向右浮动

Question

我有两个横幅广告，一个位于页面的最左侧，另一个位于页面的最右侧，带有 float:right。

<div id="sponsers">
<span class="banner1">
   <img src='url' />
   </span>
   <span class="banner2" style='float: right;'>
   <img src='url' />
   </span>
</div> 

我喜欢它的外观，但是当浏览器宽度变窄并且第二个横幅换行时，两个横幅以一种奇怪的方式重叠。 ----__

我希望第二个横幅在发生换行时向左浮动，这样横幅就可以直接堆叠在另一个之上。

我怎样才能做到这一点？

(不幸的是我无法上传没有 10 个声誉的图像)

Answer 1

你可以为此使用媒体查询

HTML

<div id="sponsers">
<span class="banner1 banner"><img src='url' /></span>
<span class="banner2 banner"><img src='url' /></span>
</div> 

CSS

#sponsers{
 /* do whatever */
}

.banner{
    width: 400px;
    height: 30px;
    color: #f3f3f3;
    border: 1px solid #000;
    display: block;
}

.banner1{
    float: left;
}


@media only screen and (max-width: 680px) {
.banner2{
    float: left;

}
}
@media only screen and (min-width: 681px) {
.banner2{
    float: right;

}
}

JSFiddle 演示: http://jsfiddle.net/vLWaA/

*请注意，相应地更新您想要的断点。当前设置为 680 像素。