英文:
How to set a child's margin-top based on parent's height?
问题
我在一场旧大学考试中遇到了问题。基本上它要求：
使用以下 JSON 文件：
[{"colore": "#FF0080", "pos_orizz": 10, "pos_vert": 30},{"colore": "#800080", "pos_orizz": 30, "pos_vert": 40},{"colore": "#808000", "pos_orizz": 50, "pos_vert": 50},{"colore": "#408080", "pos_orizz": 60, "pos_vert": 60},{"colore": "#C0C0C0", "pos_orizz": 30, "pos_vert": 50}]
创建一个函数，使用 JSON 文件中包含的数据，在 "main"（父元素）中绘制正方形 div 元素。
这些 div 元素的尺寸是视口的 10% x 10%；
位置和背景颜色在 JSON 文件中指定（位置以主元素大小的百分比表示）。
我已经完成了一切，但当我为我的 div 元素设置样式规则时，margin-top 的百分比是相对于父元素的宽度... 这导致了各种溢出问题。
以下是你的函数，我知道肯定有一些方法可以让它正常工作，希望我已经清楚地表达了问题：
async function crea(){const response = await MyFetch();const main = document.querySelector("main");response.forEach(element => {let div = document.createElement("div");div.style.width = "10vh";div.style.height = "10vh";div.style.backgroundColor = element.colore;div.style.marginTop = element.pos_vert+"%";div.style.marginLeft = element.pos_orizz+"%";main.appendChild(div);});}
英文:
I'm having problems on an old university exam.
Basically it asks to:
take this json file
[{"colore": "#FF0080", "pos_orizz": 10, "pos_vert": 30},{"colore": "#800080", "pos_orizz": 30, "pos_vert": 40},{"colore": "#808000", "pos_orizz": 50, "pos_vert": 50},{"colore": "#408080", "pos_orizz": 60, "pos_vert": 60},{"colore": "#C0C0C0", "pos_orizz": 30, "pos_vert": 50}]
create a function that, using the data contained in the json file, draws square divs in the "main" (the parent).
The dimensions of the divs are: 10% x 10% of the viewport;
position and background colour are specified in the json file (positions are in percentage of the size of the main)
I did everything but, of course, when i give my divs the style specs, the margin-top percentage is relative to the parent's width...and that cause every sort of overflow problems
async function crea(){const response = await MyFetch();const main = document.querySelector("main");response.forEach(element => {let div = document.createElement("div");div.style.width = "10vh";div.style.height = "10vh";div.style.backgroundColor = element.colore;**div.style.marginTop = element.pos_vert+"%";**div.style.marginLeft = element.pos_orizz+"%";main.appendChild(div);});}
That's my function and i know for sure there's something i can do to make that work, i hope i've been clear in the exposition of the problem
答案1
得分: 0
div {height: 300px;width: 300px;background: gray;}div div {position: absolute;left: 50px;top: 50px;width: 100px;height: 100px;background: orange;}
英文:
This is an example snippet that demonstrates the CSS to use draw square divs on a parent div. In this demo I have set the position in CSS, but you will need to do this in JavaScript
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
div {height: 300px;width: 300px;background: gray;}div div {position: absolute;left: 50px;top: 50px;width: 100px;height: 100px;background: orange;}
<!-- language: lang-html -->
<div>A<div>B</div></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论