我的 div 嵌套在其他 div 中，但我不希望那样，因为我很确定这就是导致我的框未对齐的原因。 有人对此有解决办法吗？
[英]my divs are nested in other divs but i dont want that, because im pretty sure thats what makes my boxes misaligned. anyone have a fix for this?
问题描述
Im new here and i am doing this for a school assignment, it was due today but i can still edit it until he marks it which could be soon, but my boxes arent aligned properly and i think its something to do with the box3 div being nested in the box2 div but im not sure.
我是新来的，我正在为一项学校作业做这件事，今天到期，但我仍然可以编辑它，直到他标记它，这可能很快就会完成，但我的盒子没有正确对齐，我认为它与 box3 div 有关嵌套在 box2 div 中，但我不确定。 anyone got any fixes?任何人有任何修复？
<head>
<title>Nikola Tesla Biography</title>
<meta charset="utf-8">
<style>
#box1 {
background: rgb(255, 255, 255);
width: 900px;
height: 1770px;
border: 10px solid rgb(220, 220, 220)
}
</style>
<style>
#box2 {
background: rgb(245, 245, 245);
width: 700px;
height: 260px;
border: 10px solid rgb(220, 220, 220)
}
</style>
<style>
#box3 {
background: rgb(245, 245, 245);
width: 700px;
height: 400px;
border: 10px solid rgb(220, 220, 220)
}
</style>
</head>
<center><div id="box1">
<p>ㅤ</p>
<h1><b><center>Nikola Tesla</center></b></h1>
<center><img style = "border: 10px solid rgb(220, 220, 220);" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Tesla_circa_1890.jpeg/220px-Tesla_circa_1890.jpeg"width="200"></center>
<body style="background-color: rgb(235, 235, 235);">
<p><center><b style ="font-size: 150%;"">A Biography Written By Sutton Helps. </b></center></p>
<p>ㅤ</p>
<center><div id="box2"><h3 style = "padding: 1.5%;">General Information</h3>
<p>Born on July 10th 1856 in Smiljan Croatia (At the time Austro-Hungary Empire).</p>
<p>Died on January 7th 1943 in New York, United States of America.</p>
<p>Dropped out of university at the age of 22.</p>
<p>Was employed by Thomas Edison but later quit.</p>
<p>He moved to America in 1884 with four cents to his name.</p>
<p>ㅤ</p>
<div id="box3"><h3 style = "padding: 1.5%;">List of A Few Things He Invented</h3>
<p>Tesla Coil</p>
<p>Tesla Valve</p>
<p>Radio</p>
<p>Remote Control</p>
<p>Wireless Communication</p>
<p>Violet Ray</p>
<p>Death Ray</p>
<p>Shadowgraph (Basically X-Rays)</p>
<p>Induction Coil</p>
<p>ㅤ</p>
<p><b style ="font-size: 150%;">A Life Summary Of Nikola Tesla.</b></p>
<p>Born on July 10th 1856 in Smiljan Croatia, which at the time was a part of the Austro-Hungary Empire, Nikola Tesla was an inventor who made many things. The most useful/important ones as of today are wireless communication, the radio, remote control, and shadowgraph which was basically and x-ray. At the age of just 22, Tesla dropped out of university and moved to the United States of America with just four cents, a few of his own poems, and some great ideas. There, Tesla worked with people such as Thomas Edison and George Westinghouse. While working with Edison, he was told told he would receive $50,000 if he could improve the design for DC dynamos, but after doing so, Edison told Tesla that he was joking, and that he didn't understand American humor. After failing to start his own electric light company, Tesla found some supporters for his inventions, and after receiving more than 30 patents for his inventions, he caught the eyes of George Westinghouse, and started to work for him. However, Tesla prefered independent work and stopped working for both of them to pursue his own career in inventing, but due to lack of funds he was only able to invent so much. One of his biggest achievements was making the electric power station at Niagara Falls which made power for the city of Buffalo New York. Tesla later ended up dying on January 7th 1943 in New York.</p>
<p>ㅤ</p>
<center><b style ="font-size: 150%;">Sources:</b>
<p></p>
<a href="https://www.britannica.com/summary/Nikola-Tesla"> Britannica </a>
<p></p>
<a href="https://www.history.com/topics/inventions/nikola-tesla"> History </a>
<p></p>
<a href="https://theculturetrip.com/europe/serbia/articles/11-amazing-things-nikola-tesla-gave-the-world/"> Theculturetrip </a>
</p></center>
1 个解决方案
解决方案1
0 2022-12-20 05:06:34
the problem is absolutely not because of nesting div elements, i couldn't realize what you meant by misaligned but here are your code's problems问题绝对不是因为嵌套 div 元素，我无法理解你所说的错位是什么意思，但这是你的代码问题
box3 has more height than his father (which makes it overflow the father) box3 的高度比他的父亲高（这使得它溢出了父亲）
<center> element is deprecated try using CSS margin:auto instead for div((block level)) elements And for texts like those inside h1 you can use CSS text-align:center <center>元素已弃用 尝试使用 CSS margin:auto代替 div((block level)) 元素 对于h1内的文本，您可以使用 CSS text-align:center
Problem could also be the result of your padding: 1.5% , try removing them and see if it fixes your problem问题也可能是你的padding: 1.5%的结果，尝试删除它们，看看它是否能解决你的问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.