下面是我的代码砌体用户界面，我用的是纯CSS
如果有超过4 cards但如果我在下面使用它4 cards the column-count: 3;效果不佳。
body{
height:1000px;
}
ul {
list-style: none;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
padding: 0px 4px 4px 4px;
margin-top: -10px;
display: inline-block;
width: 100%;
margin: 0px;
}
li {
width: 100%;
display: inline-block;
box-shadow: none;
background: transparent;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 2%;
}
li div {
border-radius: 3px;
background-color: #f4faff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.84);
margin-top: 1em;
cursor: pointer;
}
li div img{
height: auto;
width: 100%;
vertical-align: middle;
border: 0;
}<ul>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
</ul>
<br><br><br>
BUT THIS WORKS IF THERE IS MORE THAN 4 IMAGES
<ul>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
</ul>尝试过的解决方案：
body{
height:500px;
}
ul {
list-style: none;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
padding: 0px 4px 4px 4px;
margin-top: -10px;
display: inline-block;
width: 100%;
overflow:visible;
}
li {
width: 100%;
display: inline-block;
float:left;
background: transparent;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 2%;
}
li div {
border-radius: 3px;
background-color: #f4faff;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.84);
margin-top: 1em;
cursor: pointer;
}
li div img{
height: auto;
width: 100%;
vertical-align: middle;
border: 0;
}<ul>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
<li><div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQs7OT7p9xBXn090AjKYgX4eV6vr-kHsmbIfcSFh__PoXgdNtb5gg" alt=""></div></li>
</ul>I have used float: left; to the above solutions <li> and it works in this case but in my real view it crops down the last img's box-shadow check the below screenshot.
任何解决方案都会非常有帮助。
这里的根本原因似乎是display: inline-block on the li元素。将此更改为block应该将它们包装成列。
li {
width: 25%;
display: block;
box-shadow: none;
background: transparent;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 2%;
}
希望有帮助。