div嵌套致盒子错位修复咨询 | 学生前端作业问题

核心问题解决 #

你的判断完全正确，box3嵌套在box2内部就是导致对齐异常的关键原因。直接调整结构，把box3从box2里移出来，让两个盒子成为同级元素，就能解决对齐问题。

除此之外，你的代码还有一些HTML结构错误和不规范写法，一起修复能让页面更稳定：

• 具体修复步骤：
  1. 调整盒子层级：在</div><!-- 闭合box2 -->之后再放置box3的代码，确保box2和box3是同级，都在box1内部。
  2. 修正HTML结构：把<body>标签移到<head>之后，补充所有未闭合的标签（比如<div>、<center>）。
  3. 优化CSS写法：合并多个<style>标签，用margin: 0 auto替代<center>标签实现元素居中，更符合现代前端规范。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Nikola Tesla Biography</title>
    <meta charset="utf-8">
    <style>
        body {
            background-color: rgb(235, 235, 235);
            margin: 0;
            padding: 20px 0;
        }
        #box1 {
            background: rgb(255, 255, 255);
            width: 900px;
            height: 1770px;
            border: 10px solid rgb(220, 220, 220);
            margin: 0 auto;
            padding: 20px;
            box-sizing: border-box;
        }
        #box2, #box3 {
            background: rgb(245, 245, 245);
            width: 700px;
            border: 10px solid rgb(220, 220, 220);
            margin: 20px auto;
            padding: 0 1.5%;
            box-sizing: border-box;
        }
        #box2 {
            height: 260px;
        }
        #box3 {
            height: 400px;
        }
        h1 {
            text-align: center;
            margin: 20px 0;
        }
        .portrait {
            display: block;
            width: 200px;
            border: 10px solid rgb(220, 220, 220);
            margin: 0 auto;
        }
        .subtitle {
            text-align: center;
            font-size: 150%;
            font-weight: bold;
            margin: 30px 0;
        }
        .sources {
            text-align: center;
            font-size: 150%;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="box1">
        <h1>Nikola Tesla</h1>
        <img class="portrait" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/79/Tesla_circa_1890.jpeg/220px-Tesla_circa_1890.jpeg" alt="Nikola Tesla">
        <p class="subtitle">A Biography Written By Sutton Helps.</p>

        <div id="box2">
            <h3>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>
        </div>

        <div id="box3">
            <h3>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>
        </div>

        <p class="subtitle">A Life Summary Of Nikola Tesla.</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>

        <div class="sources">
            <p>Sources:</p>
            <p>Britannica</p>
            <p>History</p>
            <p>Theculturetrip</p>
        </div>
    </div>
</body>
</html>

额外说明 #

• 用box-sizing: border-box让盒子宽度包含边框和内边距，避免计算偏差导致的溢出或对齐问题。
• 移除多余的<center>标签，改用CSS的text-align: center和margin: 0 auto实现居中，符合语义化标准。
• 合并box2和box3的公共CSS样式，减少代码冗余。

内容的提问来源于stack exchange，提问作者Sutton Helps