在放大的两个元素在彼此顶部

Question

正如标题所说：当我放大时，我有两个元素（图像）相互叠加。左边的img是徽标，右边的那个是排行榜大小的图像。

<div style="max-height:90px;margin-bottom:20px;display:block;">

  <p style="max-height:90px;width:330px;float:left;">
    <a href="#">
      <img src="#" />
    </a>
  </p>

  <p style="float:right;">
    <a href="#" target="_top">
      <img src="#" width="728" max-height="90" alt="Image" border="0" />
    </a>
  </p>
</div>

Answer 1

我相信左边的图片是固定宽度的，而右边的排行榜广告的宽度是可变的。最好使用positions使用固定流体布局：

header {position: relative; padding-left: 110px;}
header h1 {position: absolute; left: 0; top: 0; margin: 0;}
a, img {vertical-align: top; display: inline-block;}
header aside img {max-width: 100%;}

<header>
  <h1>
    <a href="#">
      <img src="//placehold.it/100x50?text=Logo" />
    </a>
  </h1>
  <aside>
    <a href="#" target="_top">
      <img src="//placehold.it/728x90" width="728" alt="Leader Ad" />
    </a>
  </aside>
</header>

然而，你缩放，它保留得很好：

普通视图

放大视野