Question

所以我遇到一个问题，其中一个单独的div中的某些按钮绑定到标题我绝对定位了徽标，而介绍部分是一个单独的div。

继承html包括不起作用的按钮

<div class="header">
  <div class="logo-right">
    <a href="http://thehedonistproject.com" target="_blank" rel="noopener"><img src="/img/project-logo.png" alt="Hedonist Project" /></a>
    <img src="/img/drinks-logo.png" alt="Hedonist Drinks" />
  </div>
  <div class="logo">
    <a href="#"><img src="/img/logo.png" alt="Hedonist Events" /></a>
    <h4>a creative drinks consultancy</h4>
  </div>
</div>
  <div class="intro">
  <div class="container">
    <div class="intro__text editable"><h3>Hedonist Events are an events agency
    for bar staff, bar management, events production and pop-up bars.</h3>

    <div class="intro__buttons">
      <a class="btn" href="#contact">get in touch</a>
      <a class="btn" target="_blank" rel="noopener" href="deck.html">see the event deck</a>
    </div>

继承人css

.logo {
  display: flex;
  position: absolute;
  top: 5.3em;
  left: 6.5em;
  right: 0;
  bottom: 0;
  img {
    height: 3.5em;
    width: auto;
    padding-right: 1.5em;
  }
  @media (max-width: 850px) {
    display: block;
    left: 4.3em;
  }
}

.logo-right {
  position: absolute;
  top: 5.3em;
  right: 12.5em;
  bottom: 0;
  img {
    height: 3.5em;
    width: auto;
    padding-right: 1.5em;
  }
  @media (max-width: 1300px) {
    right: 8em;
  }
  @media (max-width: 950px) {
    display: none;
  }
}

.header {
  height: 20em;
  width: 100%;
  @media (max-width: 1000px) {
    height: 10em;
  }
}

Answer 1

在这种情况下使用绝对时，标题是相对的：同样使用绝对位置并且您想要左对齐标签只需使用“左”不需要“右”，除非您希望它填充相对容器的整个空间。使用以下

更新您的代码

.logo {
  display: flex;
  position: absolute;
  top: 5.3em;
  left: 6.5em;
  img {
    height: 3.5em;
    width: auto;
    padding-right: 1.5em;
  }
  @media (max-width: 850px) {
    display: block;
    left: 4.3em;
  }
}

.logo-right {
  position: absolute;
  top: 5.3em;
  right: 12.5em;
  img {
    height: 3.5em;
    width: auto;
    padding-right: 1.5em;
  }
  @media (max-width: 1300px) {
    right: 8em;
  }
  @media (max-width: 950px) {
    display: none;
  }
}

.header {
  height: 20em;
  width: 100%;
  position: relavtive;
  @media (max-width: 1000px) {
    height: 10em;
  }
}

锚链接绑定到不同的锚点

1 个答案: