表格未对齐/无法解决分辨率

编程问答 2022-08-10

问题描述

这是我建立的第一个网站，我在做一些事情。让我解释一下问题。

  1. 我设计了一个分辨率为1366 X 768的屏幕，在那里看起来很棒。但是，当我将其移到较大的屏幕（2560X1080）上时，几个元素会四处移动，这使我想要的设计失去了。如何设置最大分辨率？我已经尝试过，但是似乎没有任何作用。

  2. 我在页面的中间放置了一张桌子，但无法使它们水平对齐。我可能代码太多，以某种方式弄得一团糟。

帮助表示赞赏。

body {
  margin: 0 auto;
  font-family: Arial,Helvetica,sans-serif;
  width: 70%;
  height: 2000px;
  padding-top: 100px;
  max-width: 900px;
}

div#wrapper {
  max-width: 1000px;
  margin: 0 auto;
  Box-shadow: 0 0 10px #777;
}

.top {
  border: solid 1px black;
  margin: 0 auto;
  width: 100%;
  padding: ;
  height: 200px;
}

h1 {
  color: #cc4f41;
  text-decoration: ;
}

div {
  display: block;
  height: 225px;
}

.headertext {
  font-size: 25px;
  float: right;
  margin-top: 30px;
  margin-left: 50px;
}

.japanname {
  margin-left: 600px;
  margin-top: 30px;
  position: absolute;
  float: left;
  font-size: 30px;
}

.rank {
  float: left;
  margin-left: 50px;
  position: absolute;
  margin-top: 115px;
  margin-left: 550px;
  font-size: 10px;
}

.container {
  position: relative;
  width: 80%;
}

.logoimage {
  height: auto;
  margin-left: 2%;
  float: left;
  padding-left: 100px;
  height: 200px;
  width: 200px;
  display: flex;
  flex-direction: row;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: ;
  overflow: hidden;
  width: 30%;
  height: 100%;
  transform: scale(0);
  transition: .3s ease;
}

.container:hover .overlay {
  transform: scale(1);
}

.text {
  color: #cc4f41;
  font-family: permanent marker;
  font-size: 20px;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}


/* basic info Box*/

.info {
  margin: 0 auto;
  max-width: 900px;
  padding-top: 17%;
  height: 600px;
  border-radius: 100%;
  background-image: ;
}

.whois {
  font-size: 40px;
  margin-left: 18%;
  margin-top: 5%;
  color: #ebd234;
  position: absolute;
  font-kerning: auto;
  line-height: 35px;
  font-family: permanent marker;
}

.infopara {
  margin-left: 15%;
  margin-right: 50%;
  margin-top: 170px;
  position: absolute;
  font-size: 12px;
}

.fullbody {
  position: absolute;
  float: right;
  margin-left: 33%;
  max-width: 25%;
}

.hw {
  margin-top: 120px;
  margin-left: 470px;
  height: 30px;
  position: absolute;
  border: 2px #cc4f41 dotted;
  border-radius: 40%;
  padding: 20px;
  font-size: 14px;
}

.infotable {
  position: absolute;
  margin-top: 350px;
  margin-left: 100px;
  padding: 10px;
  text-align: center;
  table-layout: fixed;
  width: 300px;
}

.infotable th {
  font-size: 20px;
  color: #cc4f41;
  border-bottom: 2px solid #cc4f41;
}


/*abilities*/

.abilities {
  height: 600px;
  margin: 0 auto;
}

.head2 {
  font-size: 30px;
  margin-left: 70px;
  margin-top: 33px;
  height: 50px;
}

.glove {
  position: absolute;
  max-width: 10%;
}

.abhead {
  position: absolute;
  margin-left: 75px;
  font-size: 20px;
  font-style: oblique;
}

.twocolumn {
  width: 45%;
  display: inline-block;
  height: 400px;
  padding-top: 5%;
  padding-left: 25px;
  border: 5px solid black;
  border-radius: 30%;
}

.dot2 {
  position: absolute;
  width: 15%;
  opacity: 50%;
}


/*disciples*/

.disciple {
  background-color: black;
  height: 500px;
}

.genos {
  position: absolute;
  color: white;
  margin-top: 5%;
  max-width: 35%;
}

.head3 {
  font-size: 30px;
  margin-left: 80%;
  padding-top: 3%;
  height: 50px;
  color: white;
}

.h3 {
  color: white;
  position: absolute;
  font-size: 40px;
  margin-left: 25%;
  margin-top: 20%;
  font-family: permanent marker;
}

.discp {
  color: white;
  margin-left: 37%;
  padding-top: 36%;
  padding-right: 10%;
  font-size: 12px;
}
<html>

<head>
  <link rel="stylesheet" href="css/style.css">
  <title>Saitama</title>
  <link href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap" rel="stylesheet">
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1">
</head>

<body>
  <!-- top Box -->


  <div class="top">

    <div class="container">
      <img src="img/closeupface.png" style="float:left" class="logoimage">

      <div class="overlay">
        <div class="text">Just a hero for fun</div>
      </div>


      <div class="headertext" style="float:right">
        <h1>Saitama</h1>
      </div>
      <div class="japanname">サイタマ</div>
      <div class="rank">B-Class: Rank 7</div>

    </div>

  </div>

  <!-- basic info Box -->

  <div class="info">
    <div class="whois">WHO IS
      <BR> HE?</div>
    <div class="infopara" align="center">The main protagonist of the series and the titular One-Punch Man and the most powerful being to exist in the series. Saitama faces a self-imposed existential crisis,as he is Now too powerful to gain any thrill from battle.</div>
    <table class="infotable">
      <tr>
        <th>AGE</th>
        <th>GENDER</th>
        <th>JOB</th>
      </tr>
      <tr>
        <td>25</td>
        <td>Male</td>
        <td>Hero</td>
      </tr>
    </table>
    <div class="hw" style="float:right">175cm<br>70kg</div>
    <img src="img/fullbody.png" style="float:right " class="fullbody">
  </div>

  <br><br><br>

  <!-- abilities -->

  <div class="abilities">
    <img src="img/glove-01.png" class="glove">
    <div class="head2">ABILITIES</div>
    <!-- color for background : #ebd234 -->
    <div class="twocolumn" style="background-color: #ebd234">

      <div class="abhead">Unparalleled Strength</div><br><br><br>

      <div class="abhead">Enhanced Leap</div><br><br><br>

      <div class="abhead">Shockwave Generation</div><br><br><br>

      <div class="abhead">Air Manipulation</div><br><br><br>

      <div class="abhead">Non-physical interaction</div><br><br><br>

      <div class="abhead">Unparalleled Speed & Reflexes</div><br><br><br>

      <div class="abhead">Immeasurable Dexterity</div>
    </div>
    <div class="twocolumn" style="background-color: #cc4f41">

      <div class="abhead">Immeasurable Agility</div><br><br><br>

      <div class="abhead">Immense Stamina</div><br><br><br>
      <img src="img/face-01.png" class="dot2">
      <div class="abhead">Invulnerability</div><br><br><br>

      <div class="abhead">Enhanced Lung Capacity</div><br><br><br>

      <div class="abhead">Vacuum Adaptation</div><br><br><br>

      <div class="abhead">Temperature Immunity</div><br><br><br>

      <div class="abhead">Pain Suppression</div><br><br><br>

    </div>

  </div>
  <br><br>

  <!-- disciples -->

  <div class="disciple">
    <div class="head3">disCIPLES</div>
    <img src="img/genos.png" class="genos">
    <div class="h3">GENOS</div>
    <div class="discp"> The deuteragonist of One-Punch Man. He is a 19-year-old cyborg and the disciple of Saitama. He is always aiming to become more powerful and fights for justice. Under the Hero Association,he is given the name Demon Cyborg and is currently S-Class
      Rank 14.</div>
  </div>


</body>

</html>

解决方法

如@MaxiGui所建议，如果要创建响应式网站，请始终尝试使用诸如rem，em，vh，vw之类的相对单位。仅在确定高度和宽度不会改变而与屏幕尺寸无关的情况下才使用px。 您已将固定值用于某些边距，高度和宽度，请尝试将其删除，然后它将起作用

css-tableshtmlscreen-resolution