Html 在CSS3中实现动态列
我希望你能帮忙！以下是参数：Html 在CSS3中实现动态列,html,css,flexbox,Html,Css,Flexbox,我希望你能帮忙！以下是参数： 一个具有动态宽度和高度的父容器 儿童数量可变 父对象的高度由JS设置，具体取决于窗口大小 当父对象的高度收缩时，其宽度必须根据子对象而扩展 儿童必须先垂直填充容器，然后水平填充容器 子项必须是父项的直接后代。行和列不能有嵌套框或其他结构 孩子们有统一的尺寸 子项必须相对定位，并且不能在JS中计算其位置 JS仅允许设置父级的高度/宽度 HTML <ol> <li>1</li> <li>2</li>
- 一个具有动态宽度和高度的父容器
- 儿童数量可变
- 父对象的高度由JS设置，具体取决于窗口大小
- 当父对象的高度收缩时，其宽度必须根据子对象而扩展
- 儿童必须先垂直填充容器，然后水平填充容器
- 子项必须是父项的直接后代。行和列不能有嵌套框或其他结构
- 孩子们有统一的尺寸
- 子项必须相对定位，并且不能在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]-----]
[---------------------]
谢谢 我想使用
display:inline block基本上，每个子对象都将被设置为具有其设置的宽度/高度的内联块，然后您可以在每个子对象的右侧添加边距，使它们彼此隔开，然后在父对象的左侧添加边距，以便左侧也具有适当的间距。然后根据父对象的高度，计算父对象可以有多少行子对象，以便计算子对象正确折叠所需的父对象宽度（请记住，不应在宽度中包含父对象的左边距）。它都是基本的CSS，不需要CSS3。
多列我应该注意到，在您的例子中，实现之间的任何奇怪差异都可以得到很大的缓解，因为您可以控制容器的尺寸，因此您可以舍入到最接近的x像素或任何东西，以确保减少跳跃和重新招标。我认为不使用CSS3列，不可能先垂直填充，然后水平填充；但是，我不知道如何从列中获得“收缩以适应”行为 <>这是你在WebKIT中所需要的一切（它在GECKO的底部溢出），除了收缩适合，并且它可能在<代码>中间
<!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>
无标题
html，正文{高度：100%；}
ol{
保证金：0；
填充：0；
边框：1px纯蓝色；
身高：50%；
-webkit列宽：10em；
-webkit列填充：自动；
}
李{
-webkit内部中断：避免；
位置：相对位置；
保证金：0；
填充：0；
宽度：10em；
高度：7公分；
显示：块；
边框：1px纯红；
}
一,
二,
三,
四,
五,
六,
七,
八,
九,
break-inside