个人中心
gpt4 book ai didi

html - 网站的一部分不适合布局

转载 作者：太空宇宙 更新时间：2023-11-04 10:06:27 24 4
gpt4 key购买 nike

我似乎无法让我的第 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;
}

最佳答案

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

将 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

关于html - 网站的一部分不适合布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37956406/

24 4 0
文章推荐： java - 使用 SignedURL 直接将文件上传到 Cloud Storage
文章推荐： linux - react 项目设置 - npm 运行 webpack 问题
文章推荐： linux - SO_REUSEPORT 套接字服务器
文章推荐： javascript - IE8 对象不支持该属性或方法
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com