html - 如何获得 float 元素之间的垂直间距？

Question

这是我要实现的 UI 原型(prototype)

这是我当前的布局和 JSFiddle

我着手设计它的外观的方法是让广告系列和时间戳向右浮动，以便文本的其余部分环绕它而不是相交。如果其他人有任何建议，我会洗耳恭听。

我的问题是关于我突出显示的红色部分。在我的案例中，我试图在事件和时间戳之间留出一些间隔。这些是我尝试在时间戳上应用的样式

#time_stamp {
    color: #B67F30;
    margin-left: 20px;
    margin-top: 20px;
    transform: translateY(20px);
}

我知道样式本身是有效的，因为 margin-left 和 color 正在生效。然而，我用来提供垂直间距的两个属性 margin-top 和 transform:translateY 都没有任何效果。有谁知道问题是什么？我应该使用不同的风格还是不同的设计？

Answer 1

尝试使用 div 而不是 span

<div id="updates"> 
    <h1 id="vertical"><img src="mark.png" />Recent Updates</h1>
    <div id="tofloat"> 
        <div id="headline">Campaign </div> <BR />  
        <div id="time_stamp">2014.02.14</div>
    </div>
    <p>
         Loreum ipsum doloar sit amet, consectetur adipiscing
        elit. Etiam in sagittis nisl. Donec et convallis eros, quis volutpat.
    </p>            
</div>

JFiddle https://jsfiddle.net/5r1ojjdn/7/