时间戳

首页 > 解决方案 > 更改分辨率时，如何使我的段落不会一直向下移动？

html - 更改分辨率时，如何使我的段落不会一直向下移动？

问题描述

我正在尝试制作一个响应式网站，当我将段落放在页面上并缩小屏幕时，该段落一直在屏幕下方，而不是真正在段落中。它只是一个长字塔。我怎样才能解决这个问题？这是我正在谈论的图片。https://i.stack.imgur.com/HYJzs.png 以及如何使单词之间没有太多空间？

这是我的代码：

enter cod


@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
nav {
  display: flex;
  height: 120px;
  width: 100%;
  background: #192841;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 100px;
  flex-wrap: wrap;
  margin-bottom: 100px;
}
nav .logo {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
nav ul li {
  margin: 0 5px;
}
nav ul li a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
  color: #111;
  background: #fff;
}
nav .menu-btn i {
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"] {
  display: none;
}
@media (max-width: 1000px) {
  nav {
    padding: 0 40px 0 50px;
  }
}
@media (max-width: 920px) {
  nav .menu-btn i {
    display: block;
  }
  #click:checked ~ .menu-btn i:before {
    content: "\f00d";
  }
  nav ul {
    position: fixed;
    top: 80px;
    left: -100%;
    background: #111;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
  }
  #click:checked ~ ul {
    left: 0;
  }
  nav ul li {
    width: 100%;
    margin: 40px 0;
  }
  nav ul li a {
    width: 100%;
    margin-left: -100%;
    display: block;
    font-size: 20px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:checked ~ ul li a {
    margin-left: 0px;
  }
  nav ul li a.active,
  nav ul li a:hover {
    background: none;
    color: cyan;
  }
}

/*index*/

.contentHome {
  position: absolute;
  top: 5%;
  margin-top: 100px;

  text-align: center;
  width: 100%;

  color: #1b1b1b;
}
.contentHome div {
  font-size: 30px;
  font-weight: 400;
}

.contentHome2 {
  margin-left: 100px;
  margin-top: 150px;
  width: 40%;
  text-align: justify;
  height: 100px;
  align-items: center;
}

.paragrahHome h2 {
  white-space: nowrap;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Responsive Navigation Menu</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <nav>
      <div class="logo">Nick's Reviews</div>
      <input type="checkbox" id="click" />
      <label for="click" class="menu-btn">
        <i class="fas fa-bars"></i>
      </label>
      <ul>
        <li><a class="active" href="../index.html">Home</a></li>
        <li><a href="/mainPages/googleForm.html">Google Form</a></li>
        <li><a href="/mainPages/myMovies.html">Movies</a></li>
        <li><a href="/mainPages/myTvShows.html">Tv-Shows</a></li>
        <li><a href="/mainPages/topMovies.html">Top Movies</a></li>
        <li><a href="/mainPages/topTvShows.html">Top Tv-Shows</a></li>
      </ul>
    </nav>
    <div class="contentHome">
      <div>Welcome To Nick's Movie And Tv-Show Reviews</div>
    </div>
    <div class="contentHome2">
      <div class="paragrahHome">
        <h2>About this website:</h2>
        <p>
          Welcome to my Nick's Reviews. This website will be about the movies,
          and TV shows that I have watched and what I think about them. When I
          write my reviews, I will give honest feedback about them and the
          ratings I think they deserve. I will also list the ratings of movies
          and TV shows from popular websites (such as Rotten Tomatoes, IBDM, and
          other trusted sources). If you want to recommend and comment on a
          movie or TV show you want me to watch, just go to the Google form and
          fill it out.
        </p>
      </div>
    </div>
  </body>
</html>

标签： htmlcss

解决方案

在 .contenthome2 你已经定义了 40% 的宽度，这就是为什么对于移动视图它只占用 40% 的宽度，你可以为网页视图提供 40% 并且使用媒体查询可以根据你的要求增加段落的宽度。还有边距-left:100px 和 margin-right:150px 适用于 web 视图，但会占用更多空间用于移动视图。您可以尝试在 % 中使用值。

我修改了代码并给出了宽度：100% 和填充：10% 15%；

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
nav {
  display: flex;
  height: 120px;
  width: 100%;
  background: #192841;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 100px;
  flex-wrap: wrap;
  margin-bottom: 100px;
}
nav .logo {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
}
nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
}
nav ul li {
  margin: 0 5px;
}
nav ul li a {
  color: #f2f2f2;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 8px 15px;
  border-radius: 5px;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
  color: #111;
  background: #fff;
}
nav .menu-btn i {
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: none;
}
input[type="checkbox"] {
  display: none;
}
@media (max-width: 1000px) {
  nav {
    padding: 0 40px 0 50px;
  }
}
@media (max-width: 920px) {
  nav .menu-btn i {
    display: block;
  }
  #click:checked ~ .menu-btn i:before {
    content: "\f00d";
  }
  nav ul {
    position: fixed;
    top: 80px;
    left: -100%;
    background: #111;
    height: 100vh;
    width: 100%;
    text-align: center;
    display: block;
    transition: all 0.3s ease;
  }
  #click:checked ~ ul {
    left: 0;
  }
  nav ul li {
    width: 100%;
    margin: 40px 0;
  }
  nav ul li a {
    width: 100%;
    margin-left: -100%;
    display: block;
    font-size: 20px;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  #click:checked ~ ul li a {
    margin-left: 0px;
  }
  nav ul li a.active,
  nav ul li a:hover {
    background: none;
    color: cyan;
  }
}

/*index*/

.contentHome {
  position: absolute;
  top: 5%;
  margin-top: 100px;

  text-align: center;
  width: 100%;

  color: #1b1b1b;
}
.contentHome div {
  font-size: 30px;
  font-weight: 400;
}

.contentHome2 {
  padding: 5% 10%;
  width: 100%;
  text-align: justify;
  height: 100px;
  align-items: center;
}

.paragrahHome h2 {
  white-space: nowrap;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Responsive Navigation Menu</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <nav>
      <div class="logo">Nick's Reviews</div>
      <input type="checkbox" id="click" />
      <label for="click" class="menu-btn">
        <i class="fas fa-bars"></i>
      </label>
      <ul>
        <li><a class="active" href="../index.html">Home</a></li>
        <li><a href="/mainPages/googleForm.html">Google Form</a></li>
        <li><a href="/mainPages/myMovies.html">Movies</a></li>
        <li><a href="/mainPages/myTvShows.html">Tv-Shows</a></li>
        <li><a href="/mainPages/topMovies.html">Top Movies</a></li>
        <li><a href="/mainPages/topTvShows.html">Top Tv-Shows</a></li>
      </ul>
    </nav>
    <div class="contentHome">
      <div>Welcome To Nick's Movie And Tv-Show Reviews</div>
    </div>
    <div class="contentHome2">
      <div class="paragrahHome">
        <h2>About this website:</h2>
        <p>
          Welcome to my Nick's Reviews. This website will be about the movies,
          and TV shows that I have watched and what I think about them. When I
          write my reviews, I will give honest feedback about them and the
          ratings I think they deserve. I will also list the ratings of movies
          and TV shows from popular websites (such as Rotten Tomatoes, IBDM, and
          other trusted sources). If you want to recommend and comment on a
          movie or TV show you want me to watch, just go to the Google form and
          fill it out.
        </p>
      </div>
    </div>
  </body>
</html>

推荐阅读