在CSS3中实现动态列
在CSS3中实现动态列
提问于 2011-10-15 19:28:44
希望你能帮上忙！以下是参数：
使用JS设置具有动态宽度和height
- Variable数的children
- Parent's高度的
- 一个父容器，取决于父级高度折叠时窗口大小
- ，它的宽度必须根据children
- Children扩展，必须首先垂直填充容器，而水平second
- Children必须是父容器的直接后代--不能为行设置嵌套框或附加结构，并且columns
- Children具有一致大小的
- 儿童必须相对定位，并且不能在JS
- JS中计算它们的位置，只能设置父级的高度/宽度的
。
<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/CSS 3盒模型是否有此可能？
谢谢！！
回答 3
Stack Overflow用户
回答已采纳
发布于 2011-10-15 20:03:16
众所周知，multi-column的实现不一致，尽管它听起来是实现这一点的最简单和最标准的方法：
http://jsfiddle.net/383uF/1/
我应该注意，在您的情况下，实现之间的任何奇怪的差异都可以大大减轻，因为您可以控制容器的尺寸，这样您就可以舍入到最近的x像素或其他地方，以确保减少跳跃和重命名。
Stack Overflow用户
发布于 2011-10-15 19:37:50
我会说使用display: inline-block，但是只有当父程序上有一个设置的宽度时，它们才会折叠成新的行。您的参数表示JS可以设置父框的宽度，因此如果您愿意计算框的宽度以正确折叠线条，则可以使用此方法。
基本上，每个孩子都会被设置为内联块，有他们设定的宽度/高度，然后你可以给每个孩子加一个边距--向右，把它们分开，然后向父母左加一个边距，这样左边也有合适的间距。然后，根据父级的高度，计算父级可以有多少行子级，以便计算您需要父级多宽才能正确地折叠(请记住，不应将父级的页边距包括在宽度中)。这都是基本的CSS，不需要CSS3。
Stack Overflow用户
发布于 2011-10-15 20:12:52
我不相信在不使用CSS3列的情况下，垂直填充-然后水平填充是不可能的；但是，我不知道从列中获取收缩-适合行为的方法。
当你在WebKit (壁虎的底部溢出)时，它会做任何你想做的事情，除了收缩到适合，而且它可能在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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7780106
复制相关文章
相似问题
腾讯云开发者
