Question

我制作了一个网页，它看起来和我在开始时的意思完全一样。但是，从某些角度来看（我不知道是什么造成的），我发现整个屏幕都略微移动到屏幕左侧！无论我做什么，它都不会回来。实际上，当我将宽度改为100％以上时，它会恢复正常，但在刷新时，它又会回到问题所在。我在dev工具上检查了页面，发现它不仅向左移动，而且向整个页面移动。这怎么可能？我认为html文档在屏幕上显示的是什么。这是我的CSS＆amp;下面的HTML代码。

body {
  background-color: #000;
  margin:0;

} 
.secondHeader {
  background-color: #fff;
  padding:15px;
  width:100%;

  top: 0;
  right: 0;

}
header {
  background-color: #fff;
  padding:15px;
  width:100%;
  position: fixed;
  top: 0;
  right: 0;
  left:0;
  border-bottom: solid #000 1px;


}
a {
  display: grid;
  grid-template-columns: 1fr 40px 55px 1fr 1fr 1fr 1fr;

  color: inherit;
  text-decoration: none;

}

.logo {
  font-family: "Permanent Marker", cursive;
  font-size: 60px;
  grid-column: 4/8;
  grid-row-start: 2;
}

.tree1 {
  width: 65px;
  height: 65px;
  grid-column-start: 3;
  grid-row: 1 / 3;
}
/*----------------------------------Header Ends-------------------------*/
.picture {
  display: grid;
  width:100%;
  height: 400px;
  grid-column-gap: 20px;
  margin-bottom: 30px;

}
.row1{
  margin-top: 160px;
  grid-template-columns: 60% 1fr;

}
.row2 {

  grid-template-columns: 35% 20% 1fr;

}
.row3 {
  margin-top: 40px;
  grid-template-columns: 25% 25% 1fr;

}
.row4 {

  grid-template-columns: 25% 1fr 30%;
}
.row5 {
  grid-template-columns: 30% 1fr;
}
.row6 {
  grid-template-columns: 60% 1fr;
}
.picture img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

下面是html文档

<head>

<meta charset="utf-8">
<title>home</title>
<link rel="stylesheet" type='text/css' media='screen and (min-device-width: 140px) and (max-device-width: 380px)' href="mainPageIphone6.css"/>

 </head>


<body>
   <header>
      <a href="/users/jayjeong/documents/Nov-2017-Fundamental/main_page.html">
        <image class="tree1" src="/users/jayjeong/documents/walkintolife_pics/tree1.png">
        <div class="logo">logo</div>
      </a>
    </header>

    <div class="picture row1">
      <img id="pic1" src="/users/jayjeong/documents/walkintolife_pics/vietnam_farmland.jpg">
      <img id="pic2" src="/users/jayjeong/documents/walkintolife_pics/china_red.jpg">
    </div>

    <div class="picture row2">
      <img id="pic5" src="/users/jayjeong/documents/walkintolife_pics/pic4.jpg">
      <img id="pic6" src="/users/jayjeong/documents/walkintolife_pics/pic6.jpg">
      <img id="pic7" src="/users/jayjeong/documents/walkintolife_pics/vietnam_boat.jpg">
    </div>
    <div class="secondHeader">
      <a href="/users/jayjeong/documents/Nov-2017-Fundamental/main_page.html">
        <image class="tree1" src="/users/jayjeong/documents/walkintolife_pics/tree1.png">
        <div class="logo">Walk into life</div>
      </a>
    </div>

    <div class="picture row3">
      <img id="pic10" src="/users/jayjeong/documents/walkintolife_pics/pic10.jpg">
      <img id="pic11" src="/users/jayjeong/documents/walkintolife_pics/pic11.jpg">
      <img id="pic12" src="/users/jayjeong/documents/walkintolife_pics/aurora.jpg">
    </div>

    <div class='picture row4'>
      <img id="pic13" src="/users/jayjeong/documents/walkintolife_pics/couple.jpg">
      <img id="pic14" src="/users/jayjeong/documents/walkintolife_pics/camel_person_desert.jpg">
      <img id="pic15" src="/users/jayjeong/documents/walkintolife_pics/snowy_japan.jpg">
    </div>

    <div class="picture row5">
      <img id="pic4" src="/users/jayjeong/documents/walkintolife_pics/pic5.jpg">
      <img id="pic3" src="/users/jayjeong/documents/walkintolife_pics/pic2.jpg">
    </div>

    <div class="picture row6">
      <img id="pic8" src="/users/jayjeong/documents/walkintolife_pics/china_castle.jpg">
      <img id="pic9" src="/users/jayjeong/documents/walkintolife_pics/pic9.jpg">

    </div>
  </body>
</html>

为什么我的HTML内容不断向左移动？

0 个答案: