英文:
Parent not flex, but children appears flex
问题
这是一个初学者的问题，但我无法理解...
下面我有一个div，一个灰色区域。对于一个小型射击游戏，我使用appendChild()添加了2个子元素。
我的子元素呈现为Flex布局（并排），而不是像下面的JavaScript代码所要求的那样重叠：
let cadre_Jeu = document.querySelector('.cadre_Jeu');
let h_cadre = cadre_Jeu.offsetHeight;
let w_cadre = cadre_Jeu.offsetWidth;
let h_pistol = 150;
let w_pistol = h_pistol * 0.72;
// 测试1
let pistol = document.createElement('img');
pistol.id = 'pistol';
pistol.src = 'https://via.placeholder.com/200';
pistol.style.height = h_pistol + 'px';
pistol.style.width = w_pistol + 'px';
cadre_Jeu.appendChild(pistol);
pistol.style.position = 'relative';
pistol.style.left = w_cadre / 2 - w_pistol / 2 + 'px';
pistol.style.top = h_cadre / 2 - h_pistol / 2 + 'px';
// 测试1结束
// 测试2
let pistol2 = document.createElement('img');
pistol2.id = 'pistol2';
pistol2.src = 'https://via.placeholder.com/200';
pistol2.style.height = h_pistol + 'px';
pistol2.style.width = w_pistol + 'px';
cadre_Jeu.appendChild(pistol2);
pistol2.style.position = 'relative';
pistol2.style.left = w_cadre / 2 - w_pistol / 2 + 'px';
pistol2.style.top = h_cadre / 2 - h_pistol / 2 + 'px';
// 测试2结束
.cadre_Jeu {
height: 500px;
width: 50%;
background-color: #555;
border: solid black 2px;
cursor: crosshair;
}
<div class="cadre_Jeu"></div>
我不明白为什么第二个子元素会参照第一个子元素，您有任何想法吗？
英文:
it's a beginner question, but I cannot figure out...
Below I have one div, a grey area. For a small shooting game, I appendchild() 2 children.
My children appears as flex (side to side) instead of supperposing as requested by javascript code below :
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let cadre_Jeu = document.querySelector('.cadre_Jeu');
let h_cadre = cadre_Jeu.offsetHeight;
let w_cadre = cadre_Jeu.offsetWidth;
let h_pistol = 150;
let w_pistol = h_pistol * 0.72;
//test1
let pistol = document.createElement('img');
pistol.id = 'pistol';
pistol.src = 'https://via.placeholder.com/200';
pistol.style.height = h_pistol + 'px';
pistol.style.width = w_pistol + 'px';
cadre_Jeu.appendChild(pistol);
pistol.style.position = 'relative';
pistol.style.left = w_cadre / 2 - w_pistol / 2 + 'px';
pistol.style.top = h_cadre / 2 - h_pistol / 2 + 'px';
//test1 end
//test2
let pistol2 = document.createElement('img');
pistol2.id = 'pistol2';
pistol2.src = 'https://via.placeholder.com/200';
pistol2.style.height = h_pistol + 'px';
pistol2.style.width = w_pistol + 'px';
cadre_Jeu.appendChild(pistol2);
pistol2.style.position = 'relative';
pistol2.style.left = w_cadre / 2 - w_pistol / 2 + 'px';
pistol2.style.top = h_cadre / 2 - h_pistol / 2 + 'px';
//test2 end
<!-- language: lang-css -->
.cadre_Jeu {
height: 500px;
width: 50%;
background-color: #555;
border: solid black 2px;
cursor: crosshair;
}
<!-- language: lang-html -->
<div class="cadre_Jeu"></div>
<!-- end snippet -->
I don't understand why the second child is taking reference on the first one, do you have any idea ?
答案1
得分: 2
因为<img>元素是内联元素，所以你需要将position更改为absolute以获得该行为。
pistol.style.position = 'absolute';
如果你仍想保持相对位置，那么可以从第二把手枪的左属性中减去手枪的宽度，像下面这样，也可以正常工作：
pistol2.style.left = (w_cadre / 2 - w_pistol / 2) - w_pistol + 'px';
.cadre_Jeu {
height: 500px;
width: 50%;
background-color: #555;
border: solid black 2px;
cursor: crosshair;
}
<div class="cadre_Jeu"></div>
英文:
Because <img> elements are inline elements. You need to change the position to absolute to get that behavior.
pistol.style.position = 'absolute';
And also if you want to keep the position relative then subtract the pistol width from the left property of the 2nd pistol like below and it will work too:
pistol2.style.left = (w_cadre / 2 - w_pistol / 2) - w_pistol + 'px';
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
let cadre_Jeu = document.querySelector('.cadre_Jeu');
let h_cadre = cadre_Jeu.offsetHeight;
let w_cadre = cadre_Jeu.offsetWidth;
let h_pistol = 150;
let w_pistol = h_pistol * 0.72;
//test1
let pistol = document.createElement('img');
pistol.id = 'pistol';
pistol.src = 'chuck_game.png';
pistol.style.height = h_pistol + 'px';
pistol.style.width = w_pistol + 'px';
cadre_Jeu.appendChild(pistol);
pistol.style.position = 'absolute';
pistol.style.left = w_cadre / 2 - w_pistol / 2 + 'px';
pistol.style.top = h_cadre / 2 - h_pistol / 2 + 'px';
//test1 end
//test2
let pistol2 = document.createElement('img');
pistol2.id = 'pistol2';
pistol2.src = 'chuck_game.png';
pistol2.style.height = h_pistol + 'px';
pistol2.style.width = w_pistol + 'px';
cadre_Jeu.appendChild(pistol2);
pistol2.style.position = 'absolute';
pistol2.style.left = w_cadre / 2 - w_pistol / 2 + 'px';
pistol2.style.top = h_cadre / 2 - h_pistol / 2 + 'px';
//test2 end
<!-- language: lang-css -->
.cadre_Jeu {
height: 500px;
width: 50%;
background-color: #555;
border: solid black 2px;
cursor: crosshair;
}
<!-- language: lang-html -->
<div class="cadre_Jeu"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论