Question

我将@media screen and (max-width: 1000px)规则添加到我的代码中，并对其进行修改。我想在width: 1000px;上堆积盒子并且我确实成功了，但是，现在当盒子堆叠起来时，我的网页右侧还有一个额外的空间。

看来我的盒子在某种程度上与标题样式的一行冲突。试图去掉利润并且没有得到回报。我希望删除这些框添加的空间。

此外，标题可能不需要在此处执行任何操作，只有框显示在网站上。

body {
  margin: 0;
}

.header {
  width: 100%;
  height: 100vh;
  background-color: #262626;
  display: table-cell;
  vertical-align: middle;
}

.header h1 {
  line-height: 50%;
  color: white;
  text-align: center;
  font-size: 5em;
}

.content {
  margin-top: 10%;
}

.subcontent div a {
  user-select: none;
  font-size: 30px;
  display: table-cell;
  vertical-align: middle;
  text-decoration: none;
  text-align: center;
  color: black;
  font-weight: normal;
  border: 2px solid #3B3B3B;
  font-family: "ALK Rounded Mtav Med", sans-serif;
  transition-duration: 0.3s;
}

.subcontent {
  display: flex;
  justify-content: center;
}

.subcontent div {
  display: table;
  margin: 15px;
  height: 500px;
  width: 100%;
  transition-duration: 0.15s;
}

@media screen and (max-width: 1000px) {
  .subcontent {
    display: block;
  }
  .subcontent div {
    height: 300px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
}

<body>
  <div style="display: table; width: 100%;">
    <div class="header">
      <h1>ვისწავლოთ</h1>
      <h1>იაპონური</h1>
    </div>
  </div>
  <div class="content">
    <div class="subcontent">
      <div>
        <a href="#">ანბანი</a>
      </div>
      <div>
        <a href="#">გრამატიკა</a>
      </div>
    </div>
    <div class="subcontent">
      <div>
        <a href="#">ლექსიკონი</a>
      </div>
      <div>
        <a href="#">დიალოგები</a>
      </div>
    </div>
  </div>
</body>

Answer 1

不要将display:flex更改为display:block。相反，您只需将flex-diretion更改为列，并使width:auto避免由于width:100%添加的边距而导致溢出。

＆＃13;

body {
  margin: 0;
}

.header {
  width: 100%;
  height: 100vh;
  background-color: #262626;
  display: table-cell;
  vertical-align: middle;
}

.header h1 {
  line-height: 50%;
  color: white;
  text-align: center;
  font-size: 5em;
}

.content {
  margin-top: 10%;
}

.subcontent div a {
  user-select: none;
  font-size: 30px;
  display: table-cell;
  vertical-align: middle;
  text-decoration: none;
  text-align: center;
  color: black;
  font-weight: normal;
  border: 2px solid #3B3B3B;
  font-family: "ALK Rounded Mtav Med", sans-serif;
  transition-duration: 0.3s;
}

.subcontent {
  display: flex;
  justify-content: center;
}

.subcontent div {
  display: table;
  margin: 15px;
  height: 500px;
  width: 100%;
  transition-duration: 0.15s;
}

@media screen and (max-width: 1000px) {
.subcontent {
  flex-direction:column;
}
  .subcontent div {
    height: 300px;
    width:auto;
    margin-top: 15px;
    margin-bottom: 15px;
  }
}

＆＃13;

<body>
  <div style="display: table; width: 100%;">
    <div class="header">
      <h1>ვისწავლოთ</h1>
      <h1>იაპონური</h1>
    </div>
  </div>
  <div class="content">
    <div class="subcontent">
      <div>
        <a href="#">ანბანი</a>
      </div>
      <div>
        <a href="#">გრამატიკა</a>
      </div>
    </div>
    <div class="subcontent">
      <div>
        <a href="#">ლექსიკონი</a>
      </div>
      <div>
        <a href="#">დიალოგები</a>
      </div>
    </div>
  </div>
</body>

＆＃13;

Answer 2

这是因为margin: 15px上的.subcontent在.subcontent附近产生了15px的余量

body {
  margin: 0;
}

.header {
  width: 100%;
  height: 100vh;
  background-color: #262626;
  display: table-cell;
  vertical-align: middle;
}

.header h1 {
  line-height: 50%;
  color: white;
  text-align: center;
  font-size: 5em;
}

.content {
  margin-top: 10%;
}

.subcontent div a {
  user-select: none;
  font-size: 30px;
  display: table-cell;
  vertical-align: middle;
  text-decoration: none;
  text-align: center;
  color: black;
  font-weight: normal;
  border: 2px solid #3B3B3B;
  font-family: "ALK Rounded Mtav Med", sans-serif;
  transition-duration: 0.3s;
}

.subcontent {
  display: flex;
  justify-content: center;
}

.subcontent div {
  display: table;
  /* margin: 15px; This is the villain */
  height: 500px;
  width: 100%;
  transition-duration: 0.15s;
}

@media screen and (max-width: 1000px) {
  .subcontent {
    display: block;
  }
  .subcontent div {
    height: 300px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
}

<body>
  <div style="display: table; width: 100%;">
    <div class="header">
      <h1>ვისწავლოთ</h1>
      <h1>იაპონური</h1>
    </div>
  </div>
  <div class="content">
    <div class="subcontent">
      <div>
        <a href="#">ანბანი</a>
      </div>
      <div>
        <a href="#">გრამატიკა</a>
      </div>
    </div>
    <div class="subcontent">
      <div>
        <a href="#">ლექსიკონი</a>
      </div>
      <div>
        <a href="#">დიალოგები</a>
      </div>
    </div>
  </div>
</body>

Fiddle here

@media规则为我的页面添加了额外的空间

2 个答案: