gpt4 book ai didi

css - 边距高度占容器的百分比

转载 作者:行者123 更新时间:2023-11-28 18:12:43 24 4
gpt4 key购买 nike

这可能是个老问题,但我找不到答案。我只需要:

  1. 高度随窗口大小变化的 float 容器div。
  2. 内部的固定大小的 div,其垂直位置随容器的大小而变化。
  3. #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>

最佳答案

添加另一个包装 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 fiddle 来试试:http://jsfiddle.net/maysora/RFevT/

关于css - 边距高度占容器的百分比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18349540/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com