添加div-container类至header后显示错位的前端布局问题求助

问题分析 #

你尝试给「our doctors」区块的标题后添加 div-container 类，但元素却显示在页面顶部，这大概率是因为你把这个 div 放到了错误位置（比如整个 doctors 区块之外，或者页面更靠前的区域）。

修正步骤 #

要让 div-container 正确出现在「our doctors」标题之后，需将它放在 doctors 区块内部，紧跟标题 <h1 class="heading"> 之后，包裹医生卡片的容器。修改后的代码片段如下：

<!-- doctors section starts -->
<section class="doctors" id="doctors">
    <h1 class="heading"> our <span>doctors</span> </h1>
    <!-- 正确位置添加 div-container -->
    <div class="div-container">
        <div class="box-container">
            <!-- 医生卡片内容保持不变 -->
            <div class="box">
                <img src="images/doctor1.jpg" alt="">
                <h3>ABC</h3>
                <span>expert doctor</span>
                <div class="share">
                    <a href="#" class="fab fa-facebook-f"></a>
                    <a href="#" class="fab fa-twitter"></a>
                    <a href="#" class="fab fa-instagram"></a>
                    <a href="#" class="fab fa-linkedin"></a>
                </div>
            </div>
            <!-- 其余医生卡片省略 -->
        </div>
    </div>
</section>
<!-- doctors section ends -->

额外注意事项 #

你的代码中存在一处 HTML 结构错误：Table-container 区块里直接使用了 <th> 和 <td> 标签，但这些标签仅能在 <table>、<thead>、<tbody> 等表格专属标签内部使用，放在 div 中会导致浏览器渲染异常，可能间接影响页面布局。建议将这部分改为合法的非表格结构：

<!-- Table section starts  -->
<section class="Table-container">
    <div class="cell">
        <p class="tooltip">doctors at work<span class="tooltiptext">Top 5 doctors in our hospital.
            1. Dr. Siddhartha Mukherjee – Biologist.
            2. Dr. Naresh Trehan – cardiothoracic surgeon.
            3. Dr. Sudhansu Bhattacharyya – Cardiac surgeon.
            4. Dr.  Surbhi Anand – Endodontist.
            5. Dr. Ashish Sabharwal- Urologist.
            <a href="#">Learn More</a></span></p>
    </div>
    <!-- 其余 cell 内容同理修改 -->
</section>
<!-- icons section ends -->

内容的提问来源于stack exchange，提问作者sikakollu vengamounika