我无法阻止div的内容泄漏。它似乎与Foundation的CSS有关,但我无法弄清楚是什么导致了它。删除Foundation CSS后,它可以正常工作。
我真的很欣赏另一双眼睛。
HTML:
<div class="grid-box round isotope-item" style="position: absolute; left: 0px; top: 0px; -webkit-transform: translate3d(0px, 0px, 0px);">
<h5>Title</h5>
<p>Lorem ipsum</p>
<div class="meta round">
<div class="avatar">
<a href="#">
<img src="http://fakeimg.pl/46x46" width="46" height="46" alt="Username">
</a>
</div>
<div class="user">
<a href="#">
Kyle
</a>
</div>
<div class="stats">
<ul>
<li class="likes"><i class="icon-thumbs-up"></i>12</li>
<li class="saves"><i class="icon-pushpin"></i>1</li>
<li class="comment_count"><i class="icon-comments"></i>1</li>
</ul>
</div>
</div>
</div>
CSS:
.grid-box {
position: relative;
background-color: #ffffff;
width: 300px;
margin: 10px;
float: left;
padding: 10px;
border: 1px solid #DDD;
-webkit-box-shadow: 1px 1px 1px 0px #999; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
box-shadow: 1px 1px 1px 0px #999; /* Opera 10.5, IE9+, Firefox 4+, Chrome 6+, iOS 5 */
-webkit-border-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
border-radius: 6px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
#grid-container {
margin: 0 auto;
}
div.round {
-webkit-border-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
border-radius: 6px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
.actions {
float: left;
position: relative;
left: 50%;
}
.actions .button-group {
float: left;
position: relative;
left: -50%;
}
.actions .button-group a {
text-shadow: 1px 1px 1px #000; /* Firefox 3.5+, Opera 9+, Safari 1+, Chrome, IE10 */
}
.meta {
background: #F0F0F0;
border: 1px solid #DDD;
padding: 10px;
height: 48px;
}
.meta > .avatar {
float: left;
margin-right: 10px;
width: 46px;
height: 46px;
}
.meta > .user {
line-height: 16px;
padding-bottom: 10px;
overflow: hidden;
}
.meta > .stats ul {
list-style: none;
margin-bottom: 0;
line-height: 14px;
}
.meta > .stats li {
color: #777;
display: inline-block;
line-height: 14px;
width: auto;
margin-right: 19px;
border: none;
}
.meta i {
font-size: 18px;
}
答案 0 :(得分:6)
问题是您将显式高度设置为.meta
。删除那个高度,它工作得很好。
答案 1 :(得分:4)
将height:auto;
放入div.round
CSS
以下是您的jsFiddle http://jsfiddle.net/UR5t9/1/
的更新即
div.round {
height:auto;
-webkit-border-radius: 6px; /* Safari 3-4, iOS 1-3.2, Android ≤1.6 */
border-radius: 6px; /* Opera 10.5, IE9+, Safari 5, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}