边框重叠浮动div

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我建议搜索找到并使用最适合您的需求之一。