jquery - HTML 5 CSS 页脚堆叠

Question

我在一个 Liquid 网站的页脚中有这段代码。唯一的问题是，页脚中的 3 列相互堆叠(垂直)而不是水平排列。想知道是否有人能看出代码的问题所在。

#footer .column {
  float: left;
  width: 100%;
  background: white;
  opacity: 0.7;
}
#footer .column div {
  margin: 10px;
  height: 100px;
  background: black;
  opacity: 0.8;
  width: 33.3%;
}

<div id="footer">
  <div class="column">
    <div>Image 1</div>
    <div>Image 2</div>
    <div>Image 3</div>
  </div>
</div>

Answer 1

您正在 float 列(包含所有三个组件)，但未 float 组件本身。

此外，每个元素上 33.3% 的宽度加上 10px(两侧)边距几乎肯定会超过容器宽度的 100%。我已经调整了。

#footer .column {
  width: 100%;
  background: white;
  opacity: 0.7;
}

#footer .column div{
  margin: 1%;
  height: 100px;
  background: black;
  opacity: 0.8;
  width: 31.3%;
  float: left;
}

<div id="footer">
  <div class="column">
    <div>Image 1</div>
    <div>Image 2</div>
    <div>Image 3</div>
  </div>
</div>