我正在使用 HTML 和 CSS 制作一个简单的平铺 View 。它工作正常,没有任何严肃的内容,看起来也不错,但是如果我添加任何图像或类似的东西,它会立即使它看起来很垃圾(可以找到该站点 here)我做错了什么?我查看了 padding,那个空间里没有任何东西!
我的代码如下:
ul.tiles {
max-width: 620px;
height: auto;
}
ul.tiles li {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
background: #FAFAFA;
z-index: 0;
margin: 5px 5px 5px 5px;
transition: all .15s ease-in-out;
box-shadow: 0 2.5px 5px 0 rgba(0,0,0,.2);
}
ul.tiles li * {
width: 100%;
height: auto;
}
ul.tiles li:hover {
background: #FAFAFA;
z-index: 100;
transform: scale(1.0,1.0);
box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}
<div class="row" style="">
<div class="col-md-9">
<ul class="tiles">
<li><img src="//www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></li>
<li><img src="//pbs.twimg.com/profile_images/602729491916435458/hSu0UjMC.jpg" /></li>
<li><a href="#">Topic 3</a></li>
<li><a href="#">Topic 4</a></li>
</ul>
</div>
</div>
最佳答案
添加vertical-align:top
ul.tiles li {
background: #fafafa none repeat scroll 0 0;
box-shadow: 0 2.5px 5px 0 rgba(0, 0, 0, 0.2);
display: inline-block;
height: 200px;
margin: 5px;
position: relative;
transition: all 0.15s ease-in-out 0s;
vertical-align: top;/*add this property*/
width: 200px;
z-index: 0;
}
关于html - 带有内容的图 block 填充不一致,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38742758/