网站的一部分不适合布局

我似乎无法让我的第四部分与其他部分保持一致。任何帮助或线索都将不胜感激。我不知所措，我不断地使用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;
}

这是您必须进行的两个更改

将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

或您可以这样做：

将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;*/
}

相关内容

最新更新

热门标签：