Question

idk为什么但是当我缩小我的网站时，代码似乎崩溃了，整个事情看起来很恶心。我已经检查了这个问题的其他答案，但没有一个解决方案真正适合我的代码。

＆＃13;

body {
  background-image: url(gradient.png);
  background-repeat: no-repeat`enter code here`;
}

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: 307px;
}

p.vid1 {
  color: #046289;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  position: absolute;
  margin-left: 840px;
  top: 353px;
}

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;
}

＆＃13;

<!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&amp;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">
  <<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>

＆＃13;

Answer 1

如果您使用一些与其他DIV完全匹配的内联DIV，则可能会出现此问题。当放大/缩小像素时。如果您给予DIV的一个额外像素空间，它就会被修复。

当我缩小和进入时，网站布局变得疯狂

1 个答案: