Question

参考我的上一个问题here 这次我在网页滚动时遇到问题。容器里面的内容＆＃39;部分重叠。我已经多次尝试解决这个问题，但每当我解决问题时，其他一些东西都会被破坏。

正如您在代码段中看到的，我使用了3种不同的样式表和custom Grid 12行和0.5％的边距，因此页面将根据分辨率显示3种不同的视图。这段代码的问题是：

缩放时，Userinfo类与下一个类重叠。
当页面缩放到300％时，＆＃39; userinfo＆＃39;旁边的班级走开了。

这里是代码（我只包含一个CSS，因为我找不到添加多个css的选项）：

＆＃13;

body {
  margin: 0px;
  padding: 0px;
  font-family: Roboto;
  background: #eeeeee;
}
html {
  margin: 0px;
  padding: 0px;
}
h1 {
  font-size: 5.0vw;
}
h2 {
  font-family: Roboto Light;
  font-size: 30px;
}
h3 {
  font-size: 2.5vh;
}
h4 {
  font-size: 13px;
}
p {
  font-size: 2vh;
}
a {
  text-decoration: none;
  color: #333;
}
a:hover {
  text-decoration: underline;
}
.nav {
  font-family: Roboto Light;
  height: 40px;
  width: 100%;
  position: fixed;
  background: white;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.5);
}
.nav a:link,
.nav a:visited {
  font-size: 20px;
  width: auto;
  padding: 5px;
  margin: 5px;
  text-decoration: none;
  color: black;
  text-align: center;
}
.nav a:hover,
.nav a:active {
  background-color: #eeeeee;
}
.header {
  visibility: hidden;
}
.container {
  margin-top: 10%;
  margin-left: 20%;
  margin-right: 20%;
  background: white;
  border-radius: 4px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5);
}
.usericon {
  margin-left: 10%;
  border-radius: 10%;
  width: 176px;
  height: 176px;
}
.hire {
  background-color: #689f38;
  font-family: Roboto;
  border-radius: 4px;
  border: none;
  color: white;
  padding: 15px 32px;
  outline: none;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}
.hire:hover {
  background-color: #8bc34a;
  box-shadow: 0px 2px 0px 0px #668e36;
  cursor: hand;
}
.button:active {
  background-color: #33691e;
  box-shadow: 0px 2px 0px 0px #668e36;
  cursor: hand;
}
.line {
  border-radius: 1px;
  padding: 0px;
  margin: 0px;
}
/*  COLUMN SETUP  */

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 0.5%;
}
.col:first-child {
  margin-left: 0;
}
/*  GROUPING  */

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1;
  /* For IE 6/7 */
}
/*  GRID OF TWELVE  */

.span_12_of_12 {
  width: 100%;
}
.span_11_of_12 {
  width: 91.62%;
}
.span_10_of_12 {
  width: 83.25%;
}
.span_9_of_12 {
  width: 74.87%;
}
.span_8_of_12 {
  width: 66.5%;
}
.span_7_of_12 {
  width: 58.12%;
}
.span_6_of_12 {
  width: 49.75%;
}
.span_5_of_12 {
  width: 41.37%;
}
.span_4_of_12 {
  width: 33%;
}
.span_3_of_12 {
  width: 24.62%;
}
.span_2_of_12 {
  width: 16.25%;
}
.span_1_of_12 {
  width: 7.875%;
}
/*  GO FULL WIDTH BELOW 480 PIXELS */

@media only screen and (max-width: 480px) {
  .col {
    margin: 1% 0 1% 0%;
  }
  .span_1_of_12,
  .span_2_of_12,
  .span_3_of_12,
  .span_4_of_12,
  .span_5_of_12,
  .span_6_of_12,
  .span_7_of_12,
  .span_8_of_12,
  .span_9_of_12,
  .span_10_of_12,
  .span_11_of_12,
  .span_12_of_12 {
    width: 100%;
  }
}

＆＃13;

<html>

<head>
  <title>
    Yogesh Singh
  </title>
  <meta name="theme-color" content="#4caf50" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
</head>

<body>
  <div class="nav">
    <nav>
      <img src="logo.svg" style="height:40px; float:left;">
      <a href="#" style="float:left; margin-top:0px; height:30px;">About Me</a>
      &nbsp;
      <a href="#" style="float:left; margin-top:0px; height:30px;">My Projects</a>
      &nbsp;
    </nav>
  </div>
  <br>
  <div class="header">
  </div>
  <div class="container">
    <!-- Rows are horizontal and Columns are vertical-->
    <div class="section group">
      <div class="col span_3_of_12" style="margin-top:0; max-width:50%;">
        <div class="userinfo">
          <img src="large.png" class="usericon" srcset="large.png, medium.png, small.png">
        </div>
      </div>
      <div class="col span_6_of_12" style="margin-top:0; max-width:50%;">
        <h2>Yogesh Singh</h2>
        <a href="mailto:cyogesh56@gmail.com"><h4>cyogesh56@gmail.com</h4></a>
        <p><b style="border: 0.5px solid black;">21</b>
        </p>
      </div>
    </div>
    <div class="section group">
      <div class="col span_1_of_10" style="float:right; margin-right:3%;">
        <center>
          <button class="hire" type="submit" href="http://about.me/cy56">Hire</button>
        </center>
      </div>
    </div>
    <hr class="line" style="margin-left:3%; margin-right:3%;">
</body>

</html>

＆＃13;

网页扩展问题

0 个答案: