个人中心
gpt4 book ai didi

html - 当我调整窗口大小时网站内容移动

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

我在网站上工作时遇到了一些问题。当我调整浏览器窗口大小时或使用不同的设备访问网站时，所有内容都会移动并将内容推开，从而导致一团糟。我不确定如何解决它，需要有人来解释我做错了什么。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>asdadasdasd</title>
    <link href="style.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
</head>
<body>
<!--- Start  BODY wrapper -->
<div id="wrapper">
    <div id="top">
        <div id="facebook">
            <a href="#">
                <img src="img/f.png">
            </a>
        </div>
        <div class="verticalline"></div>
        <a href="#"><img src="img/a.png">
        <h3> left road</h3></a>
        <div class="verticalline"></div>
        <img src="img/p.png">
        <h3>00 000 0000</h3>
        <div class="verticalline"></div>
        <img src="img/m.png">
        <h3>xxsxs@gmail.com</h3>
    </div>
    <div id="upper">
        <div id="logo">
            <a href="#"><img src="img/logo.png"></a>
        </div>
        <nav>
            <ul id="navmenu">
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Prices</a></li> 
                <li class="active"><a href="index.html">Contact</a></li>
            </ul>
        </nav>
    </div>
    <div id="bod">
        <div id="mapcontainer">
            <h2>Map</h2>
                <iframe src="#></iframe>
        </div>
        <div id="detailsm">
            <h2>Contact Info</h2>
            <h3>Automotive<br /></h3>
            <p>left road</p>
            <p>street</p> 
            <p>town 0110</p>
            <h3>Phone</h3>
            <p>00 000 0000</p>
            <p>00 000 0000</p>
            <p>00 000 0000</p>
            <h3>Email</h3>
            <p>xsxsxsx@gmail.com</p>
        </div>
    </div>
    <div id="linev"></div>
    <div id="footer">
        <div id="cont">
            <div id="logof"><a href="#"><img src="img/logo.png"></a>  </div>
            <div id="mapf"><a href="#"><img src="img/map2.png"></a>  </div>
        </div>
        <div id="details">
            <h2>wqw Automotive</h2>
            <p>left Street</p>
            <p>town</p> 
            <p>town 0110</p>
            <h2>Phone</h2>
            <p>00 000 0000</p>
            <p>00 000 0000</p>
            <p>00 000 0000</p>
            <h2>Email</h2>
            <p>sacsaca@gmail.com</p>
        </div>
        <div id="copyright"><p>© 2016 00 000 0000</p></div>
    </div>
    </div>  
</div>
<!--- End  BODY wrapper -->
</body>
</html>

CSS

*{
margin: 0;
font-family: 'Playfair Display', serif;
padding: 0;
}
#wrapper {
margin-left:auto;
margin-right:auto;
}
#top{
background-color: #0000FF;
border-bottom: 3px solid #0000cd ;
height: 40px;
}
#top img{
float: left;
height: 30px;
padding: 5px 0 0 50px;
}
#top h3{
color: #FFFFFF;
float: left;
padding: 5px 50px 5px 15px;
}
#facebook img{
padding: 5px 50px 5px 50px;
}
.verticalline{
border-left: solid #FFFFFF;
border-width: 2px;
height: 30px;
padding: 5px;
float: left;
}
#upper{
border-bottom: 3px solid #0000cd ;
}
#logo img{
height: 60px;
padding: 15px 200px 0 150px;
float: left;
}
 nav ul{
padding: 30px;
}
nav ul li{
list-style: none;
display: inline;
padding-left: 50px;
 }
nav a{
color: #696969;
text-decoration: none;  
font-size: 25px;
padding: 7px 7px;
transition: background 0.3s linear 0s, color 0.3s linear 0s;
}
nav a:hover{
color: #0000FF;
border-bottom: 2px solid #0000FF ;
}
#bod{
color:  #696969;
padding: 25px 50px;
overflow: hidden;
}
.active a{
color: #0000FF;
border-bottom: 2px solid #0000FF ;
}
#mapcontainer{
float: left;
padding-right: 250px ;
}
#mapcontainer h2{
padding-bottom:10px;
text-align: center;
}
#detailsm{
padding: 30px 0 0 100px;
}
#detailsm h2{
padding-bottom: 10px;
}
#detailsm h3{
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
color: #696969;
}
#linev{
border-top: 3px solid #0000cd;
}
#footer{
background-color: #0000FF;
color: white;
overflow: hidden;
}
#cont{
padding: 35px 100px 0 140px;
float: left;
}
#logof img{
height: 45px;
}
#mapf img{
height: 150px;
padding: 20px 0 0 80px;
}
#details{
padding: 40px;
text-align: center;
color: white;
overflow: hidden;
}
#details h2{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
}
#copyright{
clear: left;
float: right;
padding: 0 60px 10px 0px;
font-size: 10px;
}

最佳答案

当您调整浏览器窗口大小或从其他设备访问网页时(由于设备屏幕与计算机浏览器的大小不同，因此与调整窗口大小几乎相同)，网站内容将重新调整所以它适合新屏幕。

要了解元素位置的精确计算方式，您应该熟悉 CSS 属性如何影响位置。实际上，如果你有时间，把Mozilla 的整个CSS Tutorial 看一遍是个不错的主意。以确保您真正了解是什么让您的网页看起来像现在这样。

但是，即使具备良好的 CSS 知识，实际上也很难让页面在所有屏幕尺寸上都看起来不错。但是，有许多框架可以帮助您做到这一点。一个流行的例子是 Twitter Bootstrap，它现在被大量的网站使用。如果您不打算支持旧版浏览器，另一种选择是 CSS 中称为 Flexbox 的新功能。 ，它基于根据屏幕尺寸自行调整大小的框。

这两个选项都非常强大，需要一些时间来适应，但无论在什么屏幕尺寸上显示，都可以真正简化让您的网站看起来像您想要的样子的过程。

希望我对您有所帮助，祝您好运!

关于html - 当我调整窗口大小时网站内容移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42382759/

27 4 0
文章推荐： python - 如何合并一个列表，但保持以前的列表顺序？
文章推荐： node.js - 从 Node.js 发送的字节数组中以 Angular 下载文件
文章推荐： Python 2.x 和 3.x 无源 .pyc 部署
文章推荐： javascript - 如何将 JSON 数组写入 Node.js 中的文件并在客户端再次请求
太空宇宙
个人简介

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

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