在 CSS3 中实现动态列答案

【问题标题】：Achieving dynamic columns in CSS3在 CSS3 中实现动态列
【发布时间】：2011-12-08 11:15:48
【问题描述】：

希望你能帮上忙！以下是参数：

一个具有动态宽度和高度的父容器
孩子的数量不定
父母的高度用JS设置，取决于窗口大小
随着父级高度折叠，其宽度必须根据子级扩展
儿童必须先垂直填充容器，然后水平填充容器
子级必须是父级的直接后代 - 行和列不能有嵌套框或其他结构
孩子的大小统一
孩子必须是相对定位的，在JS中无法计算他们的位置
JS 只允许设置父级的高度/宽度

HTML

<ol>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
 <li>7</li>
 <li>8</li>
 <li>9</li>
</ol>

盒子模型

[-------------]
[-[1]-[4]-[7]-]
[-[2]-[5]-[8]-]
[-[3]-[6]-[9]-]
[-------------]

高度收缩后的盒子模型

[---------------------]
[-[1]-[3]-[5]-[7]-[9]-]
[-[2]-[4]-[6]-[8]-----]
[---------------------]

这对于 CSS/CSS3 盒子模型是否可行？

谢谢！！

【问题讨论】：

你愿意接受：[-[1]-[2]-[3]-] ... [-[4]-[5]-[6]-] - >[-[1]-[2]-[3]-[4]-] ... [-[5]-[6]-]？您可以将 css 中的孩子想象成气球向左高高升起。. 第一个总是*总是第一个到达顶部，除非您将它们定位为绝对/固定定位以指定偏离流程的东西.
啊，我从来不喜欢气球。这似乎是我的难题。我只是希望浮动和内联块和CSS3黑魔法的某种疯狂组合可以实现“动态并列”效果。

标签： html css flexbox

【解决方案1】：

我会说使用display: inline-block，但如果父级设置了宽度，它们只会折叠到新行。你的参数说JS可以设置父级的宽度，所以如果你愿意计算盒子需要多宽才能正确折叠线条，那么你可以使用这种方法。

基本上，每个孩子都将被设置为具有设置宽度/高度的内联块，然后您可以为每个孩子添加一个边距右以将它们彼此隔开，然后向父级添加一个边距左左边也有适当的间距。然后根据父级的高度，计算父级可以拥有多少行子级，以计算父级需要多宽才能使子级正确折叠（请记住，您不应该包括 margin-left宽度中的父级）。这都是基本的 CSS，不需要 CSS3。

【讨论】：

感谢您的回复。不幸的是，内联块首先水平填充，而不是垂直填充。我基本上需要并排的列，但没有任何额外的结构，保持子级的顺序。
哦，我明白了。出于某种原因，我认为您说的是水平然后垂直。 o.o

【解决方案2】：

multi-column 的实现是出了名的不一致，尽管这听起来是最简单和最标准的实现方式：

http://jsfiddle.net/383uF/1/

我应该注意，实现之间的任何奇怪差异在您的情况下可以大大减轻，因为您可以控制容器的尺寸，因此您可以四舍五入到最接近的 x 像素或其他值，以确保减少跳跃和重新渲染。

【讨论】：

看起来不错的解决方案 :) +1 提问和回答

【解决方案3】：

我不相信不使用 CSS3 列就可以先垂直填充然后水平填充；但是，我不知道如何从列中获得收缩以适应行为。

这可以满足您在 WebKit 中的所有需求（它会溢出 Gecko 的底部），除了收缩以适应并且它可能会在 li 的中间中断。

<!DOCTYPE html>
<html><head>
  <title>untitled</title>
  <style type="text/css" media="screen">
    html, body { height: 100%; }
    ol {
      margin: 0;
      padding: 0;
      border: 1px solid blue;
      height: 50%;
      -webkit-column-width: 10em;
      -webkit-column-fill: auto;
    }
     li {
       -webkit-break-inside: avoid;
       position: relative;
       margin: 0;
       padding: 0;
       width: 10em;
       height: 7em;
       display: block;
       border: 1px solid red;
     }
  </style>
</head><body>
  <ol>
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
   <li>7</li>
   <li>8</li>
   <li>9</li>
  </ol>
</body></html>

【讨论】：

感谢您的回复。 mid-li break 有点破坏交易（我发誓，不是双关语），但 CSS3 cols 似乎是要走的路。
break-inside 应该防止这种情况发生，所以这是一个实现错误，您可以计算高度为盒子大小的倍数，如@davin 的回答。（无论如何，您都希望这样做，这样就不会有可变数量的额外空白。）