Question

我在流动的网站上有我的页脚代码。唯一的问题是，页脚中的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

您正在浮动列（包含所有三个组件），但不是组件本身。

此外，每个元素的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>

Answer 2

不应浮动.column，而应浮动每列

#footer > .column {
    overflow: hidden; /* clear float */
}
#footer > .column > div {
    float: left;
}

＆＃13;

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

＆＃13;

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

＆＃13;

但请注意，保证金不包含在width: 33.3%中，因此它们不适合单行。

然后，您可以使用flexboxes：

#footer .column {
  display: flex;
}
#footer > .column > div {
  flex-grow: 1;
}

＆＃13;

#footer .column {
  display: flex;
  background: white;
  opacity: 0.7;
}
#footer > .column > div {
  margin: 10px;
  height: 100px;
  background: black;
  opacity: 0.8;
  flex-grow: 1;
}

＆＃13;

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

＆＃13;

HTML 5 CSS页脚堆叠

2 个答案: