我想在一个容器中显示框,这样每行有3个。 goto方法是使用引导程序。我已经在正在开发的应用程序中使用过它,但是我不想在特定的部分使用它。
我开始在两个类中都使用显示属性。我听说过使用display flex和flex容器,所以我使用了它。
display:flex和flex direction:row将所有框放在一行中。 我尝试在两个类中使用display:inline-flex,结果与上面相同。 最终,在浏览器中进行检查时,我选择了-webkit-inline-box,它给出了所需的结果,即每行3个框。
我搜索了-webkit-inline-box并找到了一些链接: https://bugzilla.mozilla.org/show_bug.cgi?id=1257661,这似乎表明-webkit-inline-box和inline-flex是别名,但在我看来并没有发生
documentation on display: -webkit-inline-box;,这表明了同一件事。
所以我的问题是,如果行为彼此相关或相似,为什么行为会有所不同? 还有,仅使用CSS即可实现引导行为的最常见方法是什么?
我的CSS类是这样的:
//这是容器
.albumGrid {
padding-left: 50px;
margin-top: 15px;
height: 330px;
width: 330px;
}
//这是用于盒子
.albumGrid .gridItem {
height: 100px;
width: 100px;
border: 1px solid gray;
margin: 8px;
}
我添加了
display: -webkit-inline-box
两个人