css - 我可以让 div 在页面上向下流动而不是穿过它吗?

标签 css css-float

如果我有一组 div 元素,我可以使用 CSS 让它们在页面上流动并溢出到下一行。

这是一个简单的例子:

<html>
  <head>
    <title>Flowing Divs</title>
    <style type="text/css">
      .flow {
        float: left;
        margin: 4em 8em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="flow">Div 1</div>
      <div class="flow">Div 2</div>
      <div class="flow">Div 3</div>
      <div class="flow">Div 4</div>
      <div class="flow">Div 5</div>
      <div class="flow">Div 6</div>
      <div class="flow">Div 7</div>
      <div class="flow">Div 8</div>
    </div>
  </body>
</html>

是否可以让 div 在页面上向下流动而不是穿过页面,这样它们就不会沿着列向下流动,但仍然占据与它们流动时相同的空间?

所以对于上面的示例,如果它们流入两行,每行四个 div,我可以让第一列包含 Div1 和 Div2 而不是 Div1 和 Div5 吗?

最佳答案

不,这是不可能的。最简单的解决方法是通过添加包装器 DIV 来创建单独的列,然后将内容添加到每个列。这也可以使用 Javascript 或服务器端动态生成。

关于css - 我可以让 div 在页面上向下流动而不是穿过它吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2465055/

相关文章:

html - 图像 Sprite 和触摸设备

css - iPhone 6 溢出

css - 下拉菜单不正确显示

css - Div 在另一个 Div 中居中 - 左对齐?

css - 关于添加间隔 div 以修复 CSS float div 问题

html - float :right following float:left? 的标准行为是什么

html - 居中对齐具有 float : left 的 div

html - 如何仅通过 Css 设置悬停时检查的输入状态?

HTML 标签不会跨越 colspan 2 单元格中的第 1 列

css - 需要去掉rich :menuItem下面多余的空间