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 }会有效。

我也为此做了一个小提琴 http://jsfiddle.net/9t48g/

Answer 1

对于“惊人的”＃39;问题，将clear: left添加到.date的CSS中 - 这将使每个条目都低于前面的浮动内容。

（使用margin-left来解决包装问题似乎非常明智 - 当然有一种方法你可以使用它但是在你的移动网站上省略它？媒体查询，还是身体上的一类？）

Answer 2

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

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

如果您无法更改html，这应该可行。否则，我会使用Nicole Sullivan的媒体对象html / css进行此布局。

CSS - 不受欢迎的div蹒跚和文字包装

HTML：

CSS：

2 个答案: