Question

这可能是一个老问题，但我找不到答案。我只需要：

浮动容器div，其高度随窗口大小而变化。
固定尺寸的div，其垂直位置随容器的大小而变化。
＃2中的另一个固定大小的div。

以下代码满足条件＃1和＃3：调整窗口大小也正确调整容器div的大小，第二个内部div正确位于第一个内部div下方。

但条件＃2不满意。我认为“margin-top”百分比会使值根据父容器的高度而变化，但显然它不会那样工作。调整窗口大小不会对容器div内部div的垂直位置产生任何影响。

这似乎不应该那么难，但它太疯狂了！请帮忙！

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>css test</title>
  <style>html, body {height: 100%;}</style>
</head>
<body>
  <div style="height: 50%; width: 100px; float: left; background-color: #C00; text-align: center;">
  <div style="margin-top: 50%; height: 40px; width: 40px; background-color: #0C0;"></div>
  <div style="height: 40px; width: 40px; background-color: #00C;"></div>
  </div>
</body>
</html>

Answer 1

添加另一个包装器div来包装两个内部div以进行定位：

<div style="height: 50%; width: 100px; float: left; background-color: #C00; text-align: center; position: relative;">
    <div style="position: absolute; top: 50%; margin-top: -20px;">
        <div style="height: 40px; width: 40px; background-color: #0C0;"></div>
        <div style="height: 40px; width: 40px; background-color: #00C;"></div>
    </div>
</div>

这里js小提琴试试：http://jsfiddle.net/maysora/RFevT/

margin-height占容器的百分比

1 个答案: