时间戳

首页 > 解决方案 > 当我缩放页面时，文本一直相互重叠

html - 当我缩放页面时，文本一直相互重叠

问题描述

我正在尝试为作业制作作品集，当我尝试缩小页面窗口时，文本会重叠，使其变得凌乱。我曾经用 min-width 解决了这个问题，但这次我似乎无法解决它。

我无法理解为什么它会一直这样做，我对 HTML/CSS 相当“新”并且缺乏解决此问题的经验，如果有人可以帮助我解决这个问题，我将不胜感激。

谢谢。

HTML

<head>
<title>CPD Portfolio - Home</title>
<meta charset="UTF-8">
<meta name="description" content="CPD Portfolio">
<meta name="author" content="Ashley Tanner-Mortell">
<meta name="viewport" content="width=device-width, inital=scale=1">
<link rel="stylesheet" href="stylesheet.css">
</head>

<body>
<ul>
  <li><a class="active" href="home_page.html">Home</a></li>
  <li><a href="university.html">University</a></li>
  <li><a href="sports.html">Sports</a></li>
  <li><a href="student_mentor.html">Student Mentor</a></li>
</ul>

<div id="gradient">

<div class="container">
    <img src="images/ntu1.jpg" style="width:100%; height:600px; object-fit:cover; border-style: solid; text-align: center;">
    <div class="centered" style="top:15%">CPD Portfolio</div>
    <div class="centered" style="top:20%;">_______________</div>
    <div class="centered" style="top:30%; font-size:6vh;">Ashley Tanner-Mortell</div>
</div>
</div>
</body>

<footer>
<p>Footer Details</p>
</footer>

</html>

CSS

body,html{
    margin: 0;
    min-width:500px;
}

footer {
  float: left;
  background-color: grey;
  padding: 0;
  width: 100%;
  text-align: center; 
  color: white; 
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: linear-gradient(to right, silver, lightgrey);
}

li {
  list-style-type: none;
  float: left;
}

li a {
  list-style-type: none;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  list-style-type: none;
  background-color: #E1E1DC;
}

.active {
  background-color: #00628B;
}

.container {
  margin: 0;
  color: white;
  font-size: 8vh; /*The vh is viewported by the height, use this for the scaling of text.*/
}

.centered {     
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#gradient {
  height: 1300px;
  background-color: grey; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, silver, white); /* Standard syntax (must be last) */
}

.box1, .box2{
    border-style: solid;
    border-width: 1px;
    background-color: #F5F5F5;  
}

.box1{
   float: left; 
   width: 44vw;
   height: 400px;
   padding: 1vw;
   margin: 1vw;
}
.box2{
   float: left; 
   width: 44vw;
   height: 400px;
   padding: 1vw;
   margin: 1vw;
}

.box3{
   float: center;
   width: 90%;
}

标签： htmlcss

解决方案

在这里，只需替换下面的代码 HTML 和 CSS - 请参阅我的评论以获取更改的代码。

CSS

body,html{
    margin: 0;
    min-width:500px;
}

footer {
  float: left;
  background-color: grey;
  padding: 0;
  width: 100%;
  text-align: center; 
  color: white; 
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-image: linear-gradient(to right, silver, lightgrey);
}

li {
  list-style-type: none;
  float: left;
}

li a {
  list-style-type: none;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  list-style-type: none;
  background-color: #E1E1DC;
}

.active {
  background-color: #00628B;
}

.container {
  margin: 0;
  color: white;
  font-size: 8vh; /*The vh is viewported by the height, use this for the scaling of text.*/
}

.centered {     
  position: absolute;
  top: 10px;
  left: 0;
  right:0;
  /* transform: translate(-50%, -50%); */
}

#gradient {
  height: 1300px;
  background-color: grey; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, silver, white); /* Standard syntax (must be last) */
}

.box1, .box2{
    border-style: solid;
    border-width: 1px;
    background-color: #F5F5F5;  
}

.box1{
   float: left; 
   width: 44vw;
   height: 400px;
   padding: 1vw;
   margin: 1vw;
}
.box2{
   float: left; 
   width: 44vw;
   height: 400px;
   padding: 1vw;
   margin: 1vw;
}

.box3{
   float: center;
   width: 90%;
}

/* added css for portfolio section */
.portfolioSection{
    padding-top: 100px;
    text-align: center
}
/* added css for portfolio heading */
.portfolioHead{
    border-bottom:1px solid #000;
    display: inline-block;
}

HTML

<ul>
                <li><a class="active" href="home_page.html">Home</a></li>
                <li><a href="university.html">University</a></li>
                <li><a href="sports.html">Sports</a></li>
                <li><a href="student_mentor.html">Student Mentor</a></li>
              </ul>

              <div id="gradient">

              <div class="container">
                  <img src="images/ntu1.jpg" style="width:100%; height:600px; object-fit:cover; border-style: solid; text-align: center;">
                  <!-- wrapped your divisions with parent devision for better control through out screens -->
                  <div class="centered portfolioSection">
                   <!-- added class to control heading styles -->
                    <div class="portfolioHead">CPD Portfolio</div>
                    <div style="font-size:6vh;">Ashley Tanner-Mortell</div>
                </div>
              </div>
              </div>
              </body>

              <footer>
              <p>Footer Details</p>
              </footer>

还建议您阅读此内容 - https://www.w3.org/以及 youtube 上一些关于 HTML 和 CSS 的免费教程，因为我可以在您的 css 和 html 中看到许多基本问题。:)

推荐阅读