Question

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

具有动态宽度和高度的一个父容器
可变数量的儿童
使用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>

BOX MODEL

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

高度缩小后的BOX模型

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

CSS / CSS3盒子型号可以实现吗？

谢谢！

Answer 1

众所周知，

multi-column执行不一致，虽然这听起来像是最简单，最标准的实现方式：

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

我应该注意，因为你可以控制容器的尺寸，所以你的情况中的实现之间的任何奇怪差异都可以大大减轻，所以你可以舍入到最接近的x像素或者其他什么，确保没有跳跃和重新渲染。

Answer 2

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

基本上，每个孩子都会设置为内嵌块的设置宽度/高度，然后你可以为每个孩子添加一个边距，使它们彼此分开，然后向父母添加一个边距 - 所以左边也有适当的间距。然后根据父级的高度，计算父级可以拥有的子行数，以计算父级需要多大的宽度才能使子级正确折叠（请记住，不应包括边距左侧）宽度中的父级）。它都是基本的CSS，不需要CSS3。

Answer 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>

在CSS3中实现动态列

3 个答案: