Question

当页面最初加载链接时div很好，当它向下移动到它的响应位置时，它很好，当我重新调整网页大小时，它不会很好回到原来的位置。

要查看此错误，请转到笔，将页面宽度缩小到很小（链接将移动中心底部），然后再次增加宽度。

<nav class="bond-header">
  <h1>
    <a href="/home/">Home Link</a>
  </h1>

  <div class="bond-header-links">
    <h6>
      <a href="/about/">About</a>
    </h6>
  </div>
</nav>

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 131.25%;
}
@media (max-width: 650px) {
  html {
    font-size: 112.5%;
  }
}
@media (max-width: 530px) {
  html {
    font-size: 87.5%;
  }
}

body {
  background-color: #272725;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #b2b2b2;
  padding-bottom: 4rem;
}
body:after {
  content: "";
  display: table;
  clear: both;
}
hr {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.15);
  border-style: solid;
  max-width: 30%;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}

.hidden {
  display: none;
}

.bond-header {
  max-width: 38rem;
  padding-bottom: 0.5rem;
  margin: 2rem auto 4rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.bond-header:after {
  content: "";
  display: table;
  clear: both;
}
@media (max-width: 860px) {
  .bond-header {
    max-width: 93%;
  }
}
@media (max-width: 530px) {
  .bond-header {
    float: none;
    text-align: center;
    width: 100%;
  }
}
.bond-header .bond-header-links {
  float: right;
  height: 100%;
}
@media (max-width: 530px) {
  .bond-header .bond-header-links {
    float: none;
    text-align: center;
    width: 100%;
    margin-top: 1.5rem;
  }
}
.bond-header h1 {
  display: inline-block;
  font-family: "Exo 2", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 2.62rem;
  font-weight: 200;
  font-style: normal;
  line-height: 1;
  text-rendering: optimizeLegibility;
  margin: 0;
}
@media (max-width: 530px) {
  .bond-header h1 {
    font-size: 3rem;
  }
}
.bond-header h1 a {
  text-decoration: none;
  color: #eeeeee;
}
.bond-header h6 {
  display: inline-block;
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 300;
  font-style: normal;
  line-height: 1;
  margin: 1rem auto;
}
.bond-header h6 a {
  text-decoration: none;
  color: #eeeeee;
  margin-top: auto;
  margin-bottom: auto;
}
.bond-header h6 a .bond-current-location-link {
  font-weight: 400;
}
.bond-header h6 a:hover {
  text-decoration: underline;
}

Answer 1

这是一个奇怪的。如果您使用Chrome Inspector切换回float:right在.bond-header .bond-header-links上设置的h1，则会遇到同样的问题（不仅仅是在调整大小时）。我认为布局与bond-header h1上的内联块混淆，但不确定。

无论如何，如果您将float: left更改为display: inline-block而不是.bond-header h1 { /*display: inline-block; REMOVE */ float: left; /* ADD */ font-family: "Exo 2", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 2.62rem; font-weight: 200; font-style: normal; line-height: 1; text-rendering: optimizeLegibility; margin: 0; } @media (max-width: 530px) { .bond-header h1 { font-size: 3rem; float: none; } }，则会修复此问题，然后移除较小屏幕的浮动。

{{1}}

<强> Demo

响应div不会回到位置

1 个答案: