我想在这里更改列的顺序:
#container {
position: relative;
width: 600px;
}
#column-wrapper {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
}
#column-wrapper .column {
display: inline-block;
width: 100%;
padding: 20px 0;
margin-bottom: 20px;
background-color: green;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
}
结果应该是这样的:
有谁知道这个简单的解决方案?
最佳答案
当您想要基于行的订单时,为什么要使用列?看起来像the flex model的工作.如果不更改HTML,您可以这样做:
#container {
position: relative;
width: 600px;
}
#column-wrapper {
display: flex;
flex-wrap: wrap
}
#column-wrapper .column {
display: inline-block;
width: calc(30% - 20px);
padding: 20px 0;
margin: 20px;
background-color: green;
text-align: center;
font-size: 20px;
font-weight: bold;
color: #fff;
}
原文地址:https://www.jb51.cc/html/426138.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。