Question

我似乎无法让我的第4部分与其他部分保持一致。任何帮助或线索将不胜感激。我对于出了什么问题感到茫然，我一直在搞乱使用chrome devolper工具试图找到解决方案。

http://landonsimmons.altervista.org/School/assign7/assign7.html

<!doctype html>
    <html lang="en">
        <head>
            <meta charset="utc-8">
            <link rel="stylesheet" type="text/css" href="css/main.css">
            <meta name="viewport" content="width=device-width, initial-scale=1">
        </head>
        <body>
            <header>
                <img src="img/logo.png" />
                <span>Computer Science Department</span>
            </header>
            <nav>
                <ul>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Faculty</a></li> 
                    <li><a href="#">Programs</a></li> 
                    <li><a href="#">Classes</a></li>
                    <li><a href="proglist.html">Program List</a></li> 
                </ul>
            </nav>
            <section id="left">
                <ul>
                    <li>
                        <a>Computer Programming</a>
                        <a>Computer Specialist</a>
                    </li><br>
                    <li>
                        <a>Information Technology Analysis</a>
                    </li><br>
                    <li>
                        <a>Information Technology Management</a>
                    </li><br>

                <li>
                    <a>Network System Developer</a>
                </li><br>

                <li>
                    <a>Web Development Specialist</a>
                </li>
            </ul>
        </section>
        <section id="middle">
            <h1 id="hist">History of College</h1>
            <p id="first">
            </p>
            <p>
            </p>
            <h1 id="comp">About Computer Science</h1>
            <p>
            <img id="img" src="img/Capture3.PNG" />
                While the computing field is one of the fastest growing segments of industry, 
                it is also one of the fastest changing areas technologically. Computing professionals
                education does not stop with the college degree, but continues with seminars, conferences, and advanced courses and training.
                In computer theory and applications, new ideas are developed every day. 
                Success requires an ongoing commitment to learning to maintain knowledge, skills and career opportunities.
            </p>

        </section>
        <section id="right">
            <h1 id="gain">Gainful Employment Information</h1>
            <p> 
                The U.S. Department of Education requires colleges to disclose a variety of information for any financial 
                aid eligible program that <q>prepares students for gainful employment in a recognized occupation.</q> The information provided 
                here describes the graduation rates, the median debt of students who 
                completed the program and other important information regarding gainful employment for the latest completed academic year (as of July 1).
            </p>
            <br>
            <p style="font-size: 13px">&mdash; US Labor Department</p>
        </section>
        <section id="bot">
            <video height=260 width=323 >       
                <source src="vid/a1.mp4"/>
            </video>
        </section>

        <footer>
            <address> 

            </address>
    </footer>
    </body>
</html>
/***********************************************
font
***********************************************/

pre {
    font-family: serif;
}

#first::first-letter {
    font-size: 45px;
}

#big b {
    letter-spacing: 4px; 
    font-family: serif; 
    font-size: 20px;
    text-align: center;
    margin-left: 180px
}

#middle p {
    margin-right: 5px;
    margin-top: -10px;
}

#right p {
     margin:  16px 30px;
}

h1 {
    padding: 5px 40px;
    letter-spacing: 2px;
    font-family: "Times New Roman", Times, serif;
    font-weight: lighter;
}

footer address {
        color: green;
        font-variant: small-caps;
        font-style: normal;
        font-weight: bolder;
        font-size: 12px;
        text-align: center;
        font-family: sans-serif;
}

/***********************************************
page setup
***********************************************/

body {
    background-image: url(../img/parch.jpg);
    display: inline-block;
    max-width: 850px;
    margin: 25px 8px 0 8px;
}

#left {
    width: 20%;
    float: left;
    text-align: center;
}

#middle {
    width: 40%;
    border-right: 1px solid black;
    border-left: 1px solid black;
    display: inline-block;

}

video {
    overflow: hidden;
}

#bot {
    float: right;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    width: 38%;
    display: inline-block;
    vertical-align: sub;
}

#right {
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    width: 38%;
    display: inline-block;
    float: right;
}

#small {
    width: 18%;
    text-align: center; 
    display: inline-block;
    float: left;
}

#big a {
    letter-spacing: 8px;
}

#big {
    width: 75%;
    border-left: 1px solid gray;
    display: inline-block;
    padding-left: 25px;
}



#img {
    max-height: 90px;
    max-width: 140px;
    margin: 10px 10px 10px 10px;
    float: right;
}



/***********************************************
color scheme
***********************************************/

#comp {
    background-color: gray;
    text-align: center;

    color: #872E3F;
}

#gain {
    background-color: #B28570;
    text-align: center;
}

#hist {
    background-color: black;
    color: #872E3F;
    text-align: center;
}

#right {
    background-color: #FFC1A2;
}


/***********************************************
Header
***********************************************/

header {
    width: 100%;
    height: 120px;
    background-color: #000;
}


header span {
    color: #D2E1FF;
    font-size: 25px;
    margin: 30px;
    letter-spacing: 4px;
    position: relative;
    top: -30px;
}

/***********************************************
nav + list
***********************************************/

#left ul {
    list-style: none;
    padding: 0 0 0 0;
}

#left ul li a {
    text-decoration: none;
    color: black;
}

#small ul {
    list-style: none;
    padding: 0 0 0 0;
}

#small ul li a {
    text-decoration: none;
    color: black;
}

nav ul li a {
    color: #fff;
    font-size: 18px;    
    text-decoration: none;
    padding: 0 15px 0 50px;
    font-weight: bold;
    letter-spacing: 2px;
}

nav ul {
    list-style: none;
    margin: 0 0 0 0;
}

nav {
    width: 100%;
    height: 25px;
    background-color: #0000FC;
} 

nav ul li {
    display: inline;    

}

nav ul li a:hover {
    color: red;
}

#small ul li a:hover,
#left ul li a:hover {
    color: #ff6666;
    outline: 1px double black;
}

/***********************************************
footer
***********************************************/

footer {
    clear: right;
    border-top: 1px solid black;
}

Answer 1

以下是您必须进行的两项更改

将float:left;添加到#middle并将clear:right更改为clear:both以获取页脚css。

    footer  { clear:both; }
    #middle {float:left;width: 40%;border-right: 1px solid black;border-left: 1px solid black;display: inline-block;}

工作CODEPEN

Answer 2

或者你可以这样做：

将right和bot部分放入新的div
新div应该将right样式作为类样式= .right，以便您可以保留#right部分样式
取出边框，花车以及#right和#bot

看那里的结果：

http://lespointscom.com/a/misc/demo/2016_06_21/question_2/assign7.html

更改了HTML

    <div class="right">
        <section id="right">
            <h1 id="gain">Gainful Employment Information</h1>
            <p> 
                The U.S. Department of Education requires colleges to disclose a variety of information for any financial 
                aid eligible program that <q>prepares students for gainful employment in a recognized occupation.</q> The information provided 
                here describes the graduation rates, the median debt of students who 
                completed the program and other important information regarding gainful employment for the latest completed academic year (as of July 1).
            </p>
            <br>
            <p style="font-size: 13px">— US Labor Department</p>
        </section>

        <section id="bot">
            <video height="260" width="323">        
                <source src="http://landonsimmons.altervista.org/School/assign7/vid/a1.mp4">
            </video>
        </section>
    </div>

更改了CSS

#bot {
/*float: right;
border-top: 1px solid black;
border-right: 1px solid black;
border-left: 1px solid black;
width: 38%;*/
display: inline-block;
vertical-align: sub;
}

#right {
    /*border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
    width: 38%;*/
    display: inline-block;
    /*float: right;*/
}

网站的一部分不适合布局

2 个答案: