那些遇到过的问题

使用`column-count`和`box-shadow`,CSS Masonry UI无法正常工作

weB*_*Ber 13 html css html5 css3

下面是我的Masonry UI代码,我使用的是纯CSS

如果有超过4张牌,这种方法效果很好,但如果我使用4张以下的牌,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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

试过的解决方案:

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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

我已经习惯 float: left;了上面的解决方案<li>,它适用于这种情况,但在我的真实视图中,它最后img's box-shadow检查下面的截图. 在此输入图像描述

任何解决方案都将非常有用.

小智 0

我知道这不是一种正确的解决方案，但当我使用砌体时，它对我来说效果很好。事情是删除属性，只给诸如或之类column-count的宽度 ，并使用它来维护它的响应能力。（由你决定是否使用flex-box）liwidth:25%;width:300px;flex-box

body{
  height:1000px;
}

ul {
    list-style: none;
   
 
    padding: 0px 4px 4px 4px;
    margin-top: -10px;
    display: flex;
    justify-content:center;
    flex-wrap:wrap;/*suggested to use if you set width in px*/

    width: 100%;
    margin: 0px;
    
}

li {
    width: 25%;
    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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

没有flex-box

body{
  height:1000px;
}

ul {
    list-style: none;
   
 
    padding: 0px 4px 4px 4px;
    margin-top: -10px;
 

    width: 100%;
    margin: 0px;
    
}

li {
    width: 25%;
    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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

341 次

最近记录：

7 年，3 月 前
相关归档
一个小小的favicon需要另一个HTTP请求,这不是很愚蠢吗？如何让favicon进入雪碧？ 294
在输入类型="数字"上禁用webkit的旋转按钮？ 202
适用于PHP的健壮且成熟的HTML解析器 139
用一个按钮提交两个表格 47
用于直播的Web Audio API？ 40
使用prop()检查复选框不会触发附加到"更改"的事件 25
为什么在Flexbox中没有对象适合工作？ 19
在html5中一个接一个地播放视频 7
画布应用当前变换 6
CSS表100%宽度,td宽度 3
难疑归档
"INNER JOIN"和"OUTER JOIN"有什么区别？ 4506
在'for'循环中访问索引？ 3312
你如何设置,清除和切换一个位？ 2454
在字典中添加新密钥？ 2427
是否有标准函数来检查JavaScript中的null,undefined或blank变量？ 2088
有没有办法对字符串进行子串？ 1995
JavaScript .prototype如何工作？ 1988
ListView中的图像延迟加载 1881
使用jQuery获取当前URL？ 1761
在调用instanceof之前需要进行空检查吗？ 1287