带有 4 个 div 的 CSS Float

标签 css

<分区>

我网站的页脚 div 中有 4 个 div，但我无法让 float 正常工作，所以它们无法正确放置。

这是结构；

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

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

关于处理此问题的最佳方法有什么建议吗？

最佳答案

您需要做的就是 float #two,#three,#four并分配 33.3% 的宽度，但您可能还想清除 .footer 的溢出。通过overflow: auto;或其他一些 clearfix 技术。

.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;
}

关于带有 4 个 div 的 CSS Float，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41540061/

相关文章：

html - 如何屏蔽矩形内的半圆并通过css屏蔽？