Question

我有两个div包裹并互相内联。首先包含一个图像，第二个包含一个菜单。它们的尺寸灵活，适合整个用户的屏幕，并且只考虑高度的比例。宽度不是问题。

随着窗口大小的改变，图像会重新缩放，但菜单似乎具有固定或绝对位置。如何使包含菜单的第二个div与图像的第一个div成比例移动。而不是在它们之间出现间隙或在另一个方向上相互溢出。

感谢您的帮助！

/*CSS*/

html, body, .parent {
  height: 100%;
  margin:0;
}

.parent {
  white-space: nowrap;
}
.parent > div {
  display: inline-block;
  height: 100%;
  vertical-align: top;

}
img {
  height: 100%;
  max-height: 100%;
}

menu ul, li {
  display: inline;
}

<!--HTML-->

<div class="parent">
  <div class="left">
    <img src="http://www.wallpit.com/file/127/1536x2048/crop/romantic-nature.jpg" />
  </div>
  <div class="right">
    <div id="menu"><ul>
      <li><a href="#">Example</a></li>
      <li><a href="#">Example</a></li>
      <li><a href="#">Example</a></li>
      <li><a href="#">Example</a></li>
      </ul></div>
  </div>
</div>

以下是JSFiddle示例。

Answer 1

您需要设置“左”div的宽度。

试试这个：

img {
   width: 100%;
   height: auto;
}

.left {
   width:500px;
}

当窗口大小改变时，如何保持两个内联div相对？

1 个答案: