防止div内容溢出

Question

我遇到了一个问题，就是无法防止div的内容溢出。似乎与Foundation的CSS有关，但我无法确定原因。一旦删除Foundation CSS，它就能正常工作。

我真的很感激再来看一下。

http://jsfiddle.net/UR5t9/

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;
}​

- Motive

---

我在我的回答中添加了一个fiddle；可能会有所帮助。 - Darren Wainwright

Answer 1

问题在于你已经给.meta设置了一个明确的高度。去掉这个高度，它就可以正常工作了。

- Catfish

---

那么问题在于它似乎忽略了底部的填充，这就是为什么我尝试使用显式高度的原因。 - Motive

这是因为您的头像浮动了。一种选择是在 meta 结束 div 之前添加 <div style="clear:both;"></div>。 - MikeSmithDev

Answer 2

在你的CSS中，为

添加height:auto;属性。

这是你jsFiddle的更新链接：http://jsfiddle.net/UR5t9/1/ 指的是IE浏览器。

    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;
    }

- Darren Wainwright