边界重叠浮动Divs

Question

我正在为自己的版式设计Twitter Feed Javascript的样式。 问题是，当我浮动日期和交互链接时，应该包围特定推文所有部分的边框会忽略日期和交互div，从而导致边框与它们重叠。

有什么办法可以解决此问题。 可以在此处（页面底部）查看该问题： http : //www.noellesnotes.com

相对编号：

HTML

<div id="tweets">
    <ul>
        <li>
            <p class="tweet">The tweet.</p>
            <p class="timePosted">TIME</p>
            <p class="interact">INTERACT LINKS</p>
        </li>
    </ul>
</div>

CSS

.tweet, .tweet a, .tweet span, .interact a{
    margin-bottom: 10px;
    font-size: 12px;
    font-family: 'Open Sans', sans-serif, Georgia, sans-serif;
    word-wrap:break-word;
}

.timePosted{
    width:40%;
    font-size: 12px;
    float: left;
    font-weight: bold;
    text-align: left;
}

.interact{
    width:60%;
    font-size: 12px;
    float: left;
    text-align: right;
    overflow: hidden;
}

.interact a{
    margin-right: 3px;
    text-decoration: underline;
    font-family: 'Arvo', Georgia;
}

#tweets ul{
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

#tweets ul li{
    border: 3px solid rgba(255,255,255,0.4);
    margin: 3px 0;
    padding: 3px;
}

Answer 1

对于clearfix div就是这种情况。

HTML：

<div id="tweets">
    <ul>
        <li class="clearfix"> <!-- clearfix class added here -->
            <p class="tweet">The tweet.</p>
            <p class="timePosted">TIME</p>
            <p class="interact">INTERACT LINKS</p>
        </li>
    </ul>
</div>

CSS：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {   /* for IE/Mac */
    display: inline-block;
}

我建议搜索其他一些clearfix解决方案，以找到并使用最适合您需求的解决方案。