个人中心
gpt4 book ai didi

html - div出现在随机位置

转载 作者：太空宇宙 更新时间：2023-11-04 07:54:36 25 4
gpt4 key购买 nike

我正在尝试制作我的第一个网站布局，在尝试向页脚中的 div 添加背景颜色之前，样式一直很顺利。它随机出现在页面中。我知道这可能与我使用过的其他一些风格有关，但我无法分辨是哪一种，因为我没有太多经验。任何关于为什么会发生这种情况的帮助都会很棒。

* {
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    background: #dce6f7;
    font-family: sans-serif;
    letter-spacing: .5px;
}

p {
    font-family: 'Barlow Condensed', sans-serif;
    color: #3f4042;
    font-size: 18px;
    line-height: 150%;
    padding: 1%;
    text-indent: 2%;
    text-align: justify;
}

h3 {
    font-size: 30px;
    line-height: 150%;
}

h2 {
    font-size: 40px;
}

#logo {
    height: 60px;
    width: 60px;
}

#main-image {
    display: block;
    width: 100%;
    height: 500px;
    margin: 0 auto;
    border-top: solid 10px #2b477c;
}

a {
    color: #3a3b3d;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    color: #476bb2;
}

header {
    width: 100%;
    height: 60px;
    top: 0;
    left: 0;
}

#logo {
    margin: 20px;
    float: left;
    height: 60px;
}

.main-nav {
    float: right;
    padding: 30px 20px 0 0;
}

.nav-backdrop {
    width: 100%;
    height: 50px;
    background-color: #2b477c; 
}

ul li {
    list-style: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 25px;
    font-weight: bold;
    display: inline-block;
    float: left;
    padding: 0 15px 0 15px;
}

.intro-text h2 {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}

.one-half-wrap {
    width: 50%;
    float: left;
    text-align: justify;
    text-align: center;
}

.section-header {
    font-family: 'Barlow Condensed', sans-serif;
    margin-top: 20px;
}

.paragraph-text {
    margin: 0px 20px 20px 20px;
}

.skill-title {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
}

.one-third-padding {
    width: 29%;
    float: left;
    margin: 2% 2%;
    text-align: justify;
}

.one-third-padding img {
    width: 300px;
    height: 200px;
    margin-left: 30px;
    border-radius: 5px;
}

.col-text {
    margin-top: 15px;
    font-size: 20px;
}

#footer-container {
    Width: 100%;
    height: 50px;
    margin: 0 auto;
    border: 1px solid black;
}
<html>
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Practice Website</title>
        <link rel="stylesheet" href="Practice.css">
        <link href="https://fonts.googleapis.com/css?family=Barlow+Condensed" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
    </head>
    
<body>
<div id="wrapper">
<!--Top Nav Bar-->
    <div class="header-wrapper">
        <header>
            <div class="header-inner">
            <img src="logo.png" id="logo">
                <nav class="main-nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
                </nav>
            </div>
        </header>
    
<!--Main Image-->
    <div class="image wrapper">
        <img src="mainimg.png" id="main-image">
    </div>
    
    <div class="intro-text">
        <h2>Welcome To Our Website</h2>
    </div>
<!--Page columns-->
    <div class="one-half-wrap">
        <td>
            <h3 class="section-header">Heading Title Section</h3>
            <p class="paragraph-text">Lorem ipsum dolor amet cray truffaut gentrify ramps, chartreuse waistcoat brooklyn copper mug lo-fi taxidermy gluten-free drinking vinegar. Ugh stumptown banh mi hot chicken, keytar jianbing humblebrag. Kinfolk crucifix unicorn bicycle rights subway tile disrupt readymade fam vinyl kombucha man bun small batch hammock swag coloring.</p>
        </td>
    </div>
 <!--Column 2-->   
    <div class="one-half-wrap">
        <td>
            <h3 class="section-header">Heading Title Section</h3>
            <p class="paragraph-text">Lorem ipsum dolor amet cray truffaut gentrify ramps, chartreuse waistcoat brooklyn copper mug lo-fi taxidermy gluten-free drinking vinegar. Ugh stumptown banh mi hot chicken, keytar jianbing humblebrag. Kinfolk crucifix unicorn bicycle rights subway tile disrupt readymade fam vinyl kombucha man bun small batch hammock swag coloring.</p>
        </td>
    </div>
<!--End columns-->
    <div>
    <section class="one-third-padding">
        <h3 class="skill-title">Our Skills One</h3>
        <img src="columnimg1.png" class="col-img">
        <p class="col-text">Ugh stumptown banh mi hot chicken, keytar jianbing humblebrag. Kinfolk crucifix unicorn bicycle rights subway tile disrupt readymade fam vinyl kombucha man bun small batch hammock swag coloring book.</p>
    </section>
    
    <section class="one-third-padding">
        <h3 class="skill-title">Our Skills Two</h3>
        <img src="columnimg2.png" class="col-img">
        <p class="col-text">Ugh stumptown banh mi hot chicken, keytar jianbing humblebrag. Kinfolk crucifix unicorn bicycle rights subway tile disrupt readymade fam vinyl kombucha man bun small batch hammock swag coloring book.</p>
    </section>
    
    <section class="one-third-padding">
        <h3 class="skill-title">Our Skills Three</h3>
        <img src="columnimg3.png" class="col-img">
        <p class="col-text">Ugh stumptown banh mi hot chicken, keytar jianbing humblebrag. Kinfolk crucifix unicorn bicycle rights subway tile disrupt readymade fam vinyl kombucha man bun small batch hammock swag coloring book.</p>
    </section>
        </div>
    <div class="footer-wrapper">
        <footer>
            <div id="footer-container">
                <img src="logo.png" id="logo">
                <nav class="footer-nav">
                    <ul class="nav-text">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a>   </li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
        </footer>
    </div>

</div> <!--End of wrapper-->
    </div>
</body>
</html>

最佳答案

您必须通过添加 position as fixed 来固定 div 元素的位置，并且颜色保留在元素内。 

#footer-container {
    Width: 100%;
    height: 50px;
    margin: 0 auto;
    border: 1px solid black;
    background-color:pink;
    bottom:0;
    position:fixed;
    background-size:cover;
}//it works good

关于html - div出现在随机位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47450312/

25 4 0
文章推荐： javascript - 试图在用户将鼠标悬停在图像上时显示 div？
文章推荐： Java，在数组上插入对象的方法，返回 boolean 值
文章推荐： java - 设置 ant 任务来缩小 javascript 文件时遇到问题
文章推荐： jquery - Flexbox:如何使图像在 flex 元素中等高？
太空宇宙
个人简介

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

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