Question

我有两个横幅广告，一个在页面的最左侧，另一个在最右边，有一个浮动：右边。

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

*注意，相应地更新您想要的断点。目前设置为680px。

Answer 2

您将使用媒体查询执行此操作。您的断点应该是最大宽度，等于两个图像的总宽度，以及您希望在它们之间建立的任何填充。在我的例子中，这是800px（两个400px图像）。

演示：http://codepen.io/etjossem/pen/cIJrv

HTML

<div class="first-banner">
  <img src="http://placehold.it/400x150">
</div>
<div class="second-banner">
  <img src="http://placehold.it/400x150">
</div>

CSS

.first-banner {
  width: 50%;
  float: left;
  text-align: left;
}

.second-banner {
  width: 50%;
  float: right;
  text-align: right;
}

@media screen and (max-width: 800px) {
  .second-banner, .first-banner {
    width: 100%;
    text-align: center;
  }
  .second-banner {
    float: left;
  }
}

向左漂，然后在换行时向右漂浮

2 个答案: