时间戳

首页 > 解决方案 > HTML元素父子关系问题

html - HTML元素父子关系问题

问题描述

我是 HTML 新手。在我的 HTML 代码中，我有不同的部分。在我的项目部分中，我有 3 个子部分，但不知何故，我的简历部分标题位于我的项目部分下方，并且一个单独的部分显示为项目部分的一部分。链接到我的存储库：https ://jobarkhuizen.github.io/FreeCodeCampPersonalPage/

我通过 W3C 验证器运行我的代码，并在运行中包含源代码、大纲和清理 html。验证器运行没有返回错误，大纲显示项目和简历部分都是 Body 标记的子项，Columns Tribute 页面、登陆页面和技术页面是项目部分的子项

<section id="projects">
    <h2><a id="portfolio">Projects</a></h2>
        <section id="col1"><h3 style="text-align: center;">Tribute Page</h3>
            <a href="https://jobarkhuizen.github.io/FCC_Tribute_Page/" target="_blank"> 
                <img class="project-tile" src="tributepage.jpg"  alt="Tribute Page Picture"></a>
                    <p>The following guidelines was provided for the tribute page.  It should have a div element with a corresponding id="img-div". Within the img-div element, there should be an img element with a 
                            corresponding id="image".  Within the img-div element, there should be an element with a corresponding id="img-caption" that contains textual
                            content describing the image shown in img-div.  There should be an element with a corresponding id="tribute-info", which contains textual content
                            describing the subject of the tribute page. Ther should be an a element with a corresponding id="tribute-link", which links to an outside site 
                            that contains additional information about the subject of the tribute page, this link must open in a new tab.  The img element should responsively
                            resize, relative to the width of its parent element, without exceeding its original size and should be centered within its parent element.
                            </p>
        </section>

    <section id="col2"><h3 style="text-align: center;">Landing Page</h3>
        <a href="https://jobarkhuizen.github.io/LandingPage/" target="_blank">
            <img class="project-tile" src="Landingp.jpg" alt="Landing Page Picture"></a> 
                <p>The following guidelines was provided for the product landing page. The page should have a header element with a corresponding id="header".
                        An image within the header element with a corresponding id="header-img".
                        Within the #header element a nav element with a corresponding id="nav-bar".
                        At least three clickable elements inside the nav element, each with the class nav-link.
                        When you click the nav-link button in the nav element, it goes to the corresponding section of the landing page.
                        Embed a watch-able video with id="video".
                        A form element with a corresponding id="form".  Within the form, there is an input field with id="email" where you can enter an email address.
                        The #email input field should have placeholder text to let the user know what the field is for and uses HTML5 validation to confirm text is correct.
                        Within the form, there is a submit input with a corresponding id="submit".</p> 
    </section>

    <section id="col3"><h3 style="text-align: center;">Technical Page</h3> 
        <a href="https://jobarkhuizen.github.io/FCC-Technical-Page/" target="_blank"> 
          <img class="project-tile" src="technicalp.jpg" alt="Technical Page Picture"></a>
                <p>The following guidelines was provided for the technical page. Should have a main element with a corresponding id="main-doc", which contains the page's main content.
                    Within the #main-doc element, you should have several section elements, each with a class of main-section.
                    The first element within each .main-section should be a header element which contains text that describes the topic of that section.
                    Each section element with the class of main-section should also have an id that corresponds with the text of each header contained within it. 
                    Any spaces should be replaced with underscores (id="Javascript_and_Java").
                    The .main-section elements should contain at least 10 p elements in total.
                    The .main-section elements should contain at least 5 code elements in total.
                    The .main-section elements should contain at least 5 li items in total. A nav element with a corresponding id="navbar".</p> 
    </section>
</section>

<section>
    <h2><a id="resume">Resume</a></h2>
        <p>Studying Responsive Web Design through FreeCodeCamp.  My next project is studying and completing JavaScript and SQL.</p>
        <p>I have done automated testing on Winrunner and QTP and managed projects through TestDirector.</p>
        <p>Did testing in both waterfall and agile development environments. </p>
        <p>This portfolio page is for Freecodecamp certification.  I have loaded a personal portfolio page on my Github account which I will update as soon as possible.</p>

</section>

标题应该只有棕色背景并且居中对齐，但我的整个项目部分都有棕色背景，并且简历标题位于项目部分页面的右侧

标签： htmlcss

解决方案

当您使用 cssfloat属性 asleft时，内容会流向该元素的右侧。这与块元素的正常流动不同，块元素垂直堆叠在另一个之下。

有很多方法可以解决这个问题，规范中建议的一种方法是使用clearas both：

both：要求框的上边框低于源文档中较早元素产生的任何右浮动和左浮动框的底部外边缘。

因此，将您的简历部分设置为

<section class="resume">
</section>

并将其 css 添加为：

.resume {
    clear: both;
}

有关完整的故事，请参阅视觉格式模型

另外，请注意 CSS 引入了许多我们不必floats用于列布局的新功能。我们有相同grid的flex布局。

推荐阅读