Javascript 按不同顺序排列的列
我正在尝试使用CSS“columns”属性重新创建一种图库布局 但我遇到了两个问题：Javascript 按不同顺序排列的列,javascript,css,multiple-columns,Javascript,Css,Multiple Columns,我正在尝试使用CSS“columns”属性重新创建一种图库布局 但我遇到了两个问题： 列不会填充容器，出于某种原因，我总是得到n-1列 订单是1-4-7，2-5-8，3-6-9，我要1-2-3，4-5-6，7-8-9 对于第二个问题，我想我可以用javascript对HTML代码中的元素进行重新排序，但是我如何确定哪些元素需要移动，哪些元素需要移动 有什么想法吗 *{ 框大小：边框框； 保证金：0； 填充：0； } 纵队{ 显示：块； -webkit栏目：4个； -webkit柱间隙：10
- 列不会填充容器，出于某种原因，我总是得到n-1列
- 订单是1-4-7，2-5-8，3-6-9，我要1-2-3，4-5-6，7-8-9
*{
框大小：边框框；
保证金：0；
填充：0；
}
纵队{
显示：块；
-webkit栏目：4个；
-webkit柱间隙：10px；
宽度：400px；
保证金：0自动；
背景：蓝色；
}
div{
背景：粉红色；
边缘底部：10px；
}
#d5{
高度：43px；
}
1.
2.
3.
4.
5.
6.
7.
8.
9
columns{
width:25%;
}
您需要以%定义宽度
columns{
width:25%;
}
你得到的订单是正确的。。。 柱垂直渲染，当它达到4时，4在侧面移动
1 4 7
2 5 8
3 6 9
你有9个元素。。。9要放置在4列表格中。。。但由于它是从上到右填充的，所以网格id的最后一列是空的 您得到的顺序是正确的。。。 柱垂直渲染，当它达到4时，4在侧面移动
1 4 7
2 5 8
3 6 9
你有9个元素。。。9要放置在4列表格中。。。但由于它是从上到右填充的，所以网格id的最后一列是空的 解决方案是，正如Sharma所说，您必须定义一个宽度 无论如何，我强烈建议尝试使用Flexbox布局。它非常适合这种情况。使用Felxbox，您可以通过一个简单的声明更改元素的旋转。尝试在flex flow中使用列而不是行，您将了解我的意思。（可能需要进行更多修改，使其与第一个示例相似） 我做了一个小片段，只是用了flexbox而不是block
columns{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
width: 600px;
margin: 0 auto;
background: blue;
}
div{
width: 200px;
background: pink;
}
它可以使用它。解决方案是，正如沙玛所说，你必须定义一个宽度 无论如何，我强烈建议尝试使用Flexbox布局。它非常适合这种情况。使用Felxbox，您可以通过一个简单的声明更改元素的旋转。尝试在flex flow中使用列而不是行，您将了解我的意思。（可能需要进行更多修改，使其与第一个示例相似） 我做了一个小片段，只是用了flexbox而不是block
columns{
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: stretch;
width: 600px;
margin: 0 auto;
background: blue;
}
div{
width: 200px;
background: pink;
}
它可以玩它。只有在元素具有相同高度时才起作用 这是而不是OP指出的情况 您不需要为此使用-webkit列。你可以这样做
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
columns {
display: block;
width: 400px;
margin: 0 auto;
background: blue;
}
/* clear fix */
columns:after {
content: "";
display: table;
clear: both;
}
/* the float takes care of collapsing white space between elements
132 = (400 - 2 x 2 [margins]) / 3 [columns]
*/
div {
float: left;
display: block;
background: pink;
width: 132px;
margin-right: 2px;
}
/* we don't need right margins for the last column */
div:nth-of-type(3n) {
margin-right: 0;
}
*{
框大小：边框框；
保证金：0；
填充：0；
}
纵队{
显示：块；
宽度：400px；
保证金：0自动；
背景：蓝色；
}
/*清晰定位*/
栏目：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*浮动处理元素之间的空白塌陷
132=（400-2x2[页边距]）/3[列]
*/
div{
浮动：左；
显示：块；
背景：粉红色；
宽度：132px；
右边距：2px；
}
/*最后一列不需要右边距*/
分区：第n个类型（3n）{
右边距：0；
}
1.
2.
3.
4.
5.
6.
7.
8.
9
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
columns {
display: block;
width: 400px;
margin: 0 auto;
background: blue;
}
/* clear fix */
columns:after {
content: "";
display: table;
clear: both;
}
/* the float takes care of collapsing white space between elements
132 = (400 - 2 x 2 [margins]) / 3 [columns]
*/
div {
float: left;
display: block;
background: pink;
width: 132px;
margin-right: 2px;
}
/* we don't need right margins for the last column */
div:nth-of-type(3n) {
margin-right: 0;
}
*{
框大小：边框框；
保证金：0；
填充：0；
}
纵队{
显示：块；
宽度：400px；
保证金：0自动；
背景：蓝色；
}
/*清晰定位*/
栏目：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
/*浮动处理元素之间的空白塌陷
132=（400-2x2[页边距]）/3[列]
*/
div{
浮动：左；
显示：块；
背景：粉红色；
宽度：132px；
右边距：2px；
}
/*最后一列不需要右边距*/
分区：第n个类型（3n）{
右边距：0；
}
1.
2.
3.
4.
5.
6.
7.
8.
9