Question

我的html页面有问题。我有3个部分：标题，包装和页脚，我希望这三个部分垂直对齐。但问题是我的第五部分不在我的部分包装器中，但在它下面，与部分页脚相同的级别

这是我的HTML页面：

<<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    </head> 
    <body>
        <!-- Header-->
        <section id="header">
        </section>
        <!-- Wrapper -->
        <section id="wrapper">
            <section id="initial">
            </section>
            <!-- Main -->
            <div id="main">
                <!-- Prices -->
                <section id="one">
                    <section id="two">
                    </section>
                    <section id="three">
                    </section>
                </section>
                <section id="four">
                </section>
            </div>
            <section id="five">
            </section>
        </section>
        <section id="footer">
        </section>
    </body> 
</html>


#wrapper {
    transition : transform 0.5s;
    padding: 44px 0 1px 0;
    border :0;
    font-size : 100%;
    font : inherit;
    vertical-align : baseline;
    box-sizing : border-box;
    display :block;
    height : 990px;
}

#footer {
    background-image: url("../img/logos.png");
    position:relative;
    display:block;
    background-repeat:no-repeat;
    height : 100px;
    font-size : 200%;
    text-align: center;
}

#main {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box;
    display: block;
}

Answer 1

我相信this就是你想要的效果：

HTML：

<header>
    <h1>Header</h1>
</header>
<div id="main" role="main">
    <section id="one">
        <h2>Section Heading One</h2>        
    </section>
    <section id="two">
        <h2>Section Heading Two</h2>        
    </section>
    <section id="three">
        <h2>Section Heading Three</h2>        
    </section>
    <section id="four">
        <h2>Section Heading Four</h2>        
    </section>
    <section id="five">
        <h2>Section Heading Five</h2>        
    </section>
</div>
<footer>
    <p>Footer</p>    
</footer>

CSS：

header
{
    width: 100%;
    height: auto;

    text-align: center;

    background-color: whitesmoke;
}

#main
{
    width: 100%;
    height: auto;

    background-color: khaki;
}

section
{
    width: 100%;
    height: auto;

    text-align: center;
    padding: 5px 0 5px 0;
}

footer
{
    width: 100%;
    height: auto;

    text-align: center;

    background-color: lightgrey;
}

垂直对齐div

1 个答案: