3

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

  • 一个具有动态宽度和高度的父容器
  • 可变数量的孩子
  • Parent的高度是用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 盒子模型可行吗？

谢谢！！

4

3 回答 3

2

multi-column臭名昭著的实现不一致，尽管这听起来像是实现它的最简单和最标准的方法：

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

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

于 2011-10-15T20:03:16.160 回答
0

我不相信不使用 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>
于 2011-10-15T20:12:52.943 回答
0

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

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

于 2011-10-15T19:37:50.340 回答