CSS - 不需要的 div 交错和文本换行

Question

我有一个事件列表页面，其中出于样式目的将日期包装在 div 中。如果下面的代码保持原样，div 就会交错排列。另外，如果div后面的p内容超过几行，就会绕过div。有没有一种简单的方法可以在不将每个列表封装在一个 div 中的情况下防止这种情况发生？

HTML:

<div class="date">Mar <span>28</span></div>
<p>Lorem ipsum dolor sit amet</p>

<div class="date">Mar <span>29</span></div>
<p>Lorem ipsum dolor sit amet</p>

<div class="date">Apr <span>6</span></div>
<p>Lorem ipsum dolor sit amet</p>

CSS:

.date {
float: left;
width: 42px;
height: 40px;
padding-top: 2px;
font-size: 12px;
text-align: center;
text-transform: uppercase;
background-color: #ccc;
margin-right: 10px;
}
.date span {
display: block;
font-size: 24px;
}

一些解决方案存在问题:

加入.date + p { height: 42px } 表示长行的p内容会溢出。

添加 .date + p { min-height: 42px } 不考虑文本换行。

如果我没有将 p 内容放在 div 下的移动版网站，添加 .date + p { margin-left: 50px } 会起作用。

我也为此做了一个 fiddle 。
http://jsfiddle.net/9t48g/

Answer 1

.date {
    clear:left;
}
.date + p {
    overflow:hidden;
    min-height:40px;
}

http://jsfiddle.net/aber100/qs8WC/

如果您不能更改 html，那应该可以工作。否则，我会为此布局使用 Nicole Sullivan 的媒体对象 html/css。