【发布时间】：2017-10-15 06:50:30
【问题描述】：
我不知道为什么，但是当我缩小我的网站时，代码似乎崩溃了，整个事情看起来很恶心。我已经检查了这个问题的其他答案，但没有一个解决方案真正适合我的代码。
body {
background-image: url(gradient.png);
background-repeat: no-repeat;
background-size: cover;
}
h1.heading {
color: #046289;
font-size: 50px;
margin-top: 100px;
text-align: center;
font-family: 'Poppins', sans-serif;
}
p.heading {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: relative;
margin-left: 70px;
top: 60px;
}
p.heading1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: relative;
margin-left: 70px;
top: 50px;
}
img.aml {
width:280px;
height:280px;
position: absolute;
margin-left: 360px;
bottom: 30px;
}
iframe.livevid {
position: absolute;
margin-left: 840px;
}
p.vid {
color: #046289;
font-family: 'Poppins', sans-serif;
font-size: 20.8px;
font-weight: 600;
position: absolute;
margin-left: 840px;
top: 313px;
}
p.vid1 {
color: #046289;
font-family: 'Poppins', sans-serif;
font-weight: 400;
position: absolute;
margin-left: 840px;
top: 363px;
}
a {
text-decoration: none;
}
p a:link {
color: #4204a5;
}
p a:visited {
color: #4204a5;
}
p a:hover {
color: #71a3f2;
}
/*
BELOW - NAVIGATION BAR
*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
}
li {
float: left;
}
.spacefornav {
margin-left: 462px;
}
li a:hover {
color: #71a3f2;
}
div.nav {
color: #046289;
}
li a {
display: inline-block;
color: #046289;
text-align: center;
padding: 8px 10px;
text-decoration: none;
font-family: 'Poppins'; sans-serif;
margin: 0px 20px;
font-weight: 500;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Childish Gambino</title>
<meta charset="UTF-8">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&subset=devanagari,latin-ext" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<h1 class="heading">CHILDISH GAMBINO</h1>
<ul>
<div class="nav">
<li class="spacefornav"><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="music.html">Music</a></li>
<li><a href="contact.html">Contact</a></li>
</div>
</ul>
<p class="heading">"AWAKEN MY LOVE!"</p>
<p class="heading1">
Childish Gambino's latest
<br>
and freshest album is
<br>
AVAILABLE NOW on <a href="https://itunes.apple.com/us/album/awaken-my-love/id1173655524" target="_blank">iTunes</a>,
<br>
<a href="https://play.spotify.com/album/4xnq1L6P551Qcb9gBXNMK7" target="_blank">Spotify</a> and <a href="https://play.google.com/store/music/album?id=Bc3g3mmud6z3xm6todpsldagple&tid=song-Tdcdooebkcepkmj7amghovz2ncq&hl=en" target="_blank">Google Play Music</a>
</p>
<img src="images/awakenmylove.jpg" class="aml" title="'Awaken My Love!' album art" alt="'Awaken My Love' album art">
<<iframe width="280" height="158" src="https://www.youtube.com/embed/6v7W513Wj3g?rel=0" frameborder="0" allowfullscreen class=livevid></iframe>
<p class="vid">Watch Now!</p>
<p class="vid1">Childish Gambino performing '3005'<br>live at Splendor In The Grass!</p>
</body>
</html>【问题讨论】：
-
到底是什么问题？
-
如果你想满足缩放的需求（如果你考虑一下，这并不是真的必要），那么你不能使用像素作为宽度和大小，你必须使用百分比。要么创建一个容器
div并修复它的宽度 -
或者，我建议使用 CSS 框架，例如
Bootstrap来满足您的需求。由于使用position : relative，您的网站“陷入困境”。 -
那么我将如何创建一个带有 div 的容器来解决这个问题呢？抱歉，我是 html 新手 :(((
标签： javascript html css layout