CSS Float有4个div

Question

我的网站页脚div中有4个div，我无法让浮动元素正常工作，所以它们可以正确放置。

这是结构;

<div class="footer"> <div id="one"></div> <div id="two"></div> <div id="three"></div> <div id="four"></div> </div>

Div One需要是全宽并且在页面的整个长度上方运行，其他三个应该彼此相邻，每个页面占据页面的三分之一。

有关处理此问题的最佳方法的任何建议吗？

2 个答案:

答案 0 :(得分：0)

为什么不能简单地说：

#one {
  width: 100%;
}

#two, #three, #four {
  width: 33.33%;
  float: left;
}

可以看到输出here。

您也可以使用.footer div:nth-of-type(1)改为使用未知的DIV名称对其进行扩展：

.footer div:nth-of-type(1) {
  width: 100%;
}

.footer div {
  width: 33.33%;
  float: left;
}

我已经创建了一个可扩展的输出here。

希望这有帮助！

答案 1 :(得分：0)

您需要做的只是浮动#two,#three,#four并指定33.3％的宽度，但您可能还希望通过.footer或其他一些clearfix技术清除overflow: auto;的溢出。

.footer {
  overflow: auto;
}
#two,#three,#four {
  float: left;
  width: 33.33%;
}

或者，您可以使用flexbox

执行此操作

.footer {
  display: flex;
  flex-wrap: wrap;
}
#one {
  width: 100%;
}
#two,#three,#four {
  flex-grow: 1;
  flex-basis: 0;
}

Answer 1

为什么不能简单地说：

#one {
  width: 100%;
}

#two, #three, #four {
  width: 33.33%;
  float: left;
}

可以看到输出here。

您也可以使用.footer div:nth-of-type(1)改为使用未知的DIV名称对其进行扩展：

.footer div:nth-of-type(1) {
  width: 100%;
}

.footer div {
  width: 33.33%;
  float: left;
}

我已经创建了一个可扩展的输出here。

希望这有帮助！

Answer 2

您需要做的只是浮动#two,#three,#four并指定33.3％的宽度，但您可能还希望通过.footer或其他一些clearfix技术清除overflow: auto;的溢出。

.footer {
  overflow: auto;
}
#two,#three,#four {
  float: left;
  width: 33.33%;
}

或者，您可以使用flexbox

执行此操作

.footer {
  display: flex;
  flex-wrap: wrap;
}
#one {
  width: 100%;
}
#two,#three,#four {
  flex-grow: 1;
  flex-basis: 0;
}