Question

我正在使用zurb foundation v.6，它是flex网格，而不是使用浮点数的普通网格。我已经制作了一个页脚，我有2个div，我希望每个div都与自己的目标对齐。这是代码：

<footer id="footer">
  <div class="row align-justify align-middle">
    <div class="column small-6">
      Adresse, org. nr, lenke til kontakt
    </div>
    <div class="column small-6">
      <img src="/img/facebook.svg">
      <img src="/img/twitter.svg">
    </div>
  </div>
</footer>

这是它的css：

#footer {
  height: 4rem;
  position: relative;
  z-index: 1;
  background-color: $gray;

  .social-links {
    display: flex;
    justify-content: flex-end;
  }
}

我遇到的问题是页脚没有占据4rem的高度，它只占用图像的高度。我该如何解决这个问题？

Answer 1

添加css

.align-middle {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items:center;
  height:100%;
}

＆＃13;

#footer {
  height: 4rem;
  position: relative;
  z-index: 1;
  background-color: #ddd;
}

.social-links {
  display: flex;
  justify-content: flex-end;
}

.align-middle {
  display: flex;
  justify-content: space-between;
  flex-flow: row wrap;
  align-items:center;
  height:100%;
}

＆＃13;

<footer id="footer">
  <div class="row align-justify align-middle">
    <div class="column small-6">
      Adresse, org. nr, lenke til kontakt
    </div>
    <div class="column small-6">
      <img src="/img/facebook.svg">
      <img src="/img/twitter.svg">
    </div>
  </div>
</footer>

＆＃13;

Zurb基金会flex grid问题

1 个答案: