css-float - 列表中的并排 div

Question

尝试显示即将发生的事件列表，显示日期、图标和简短描述。所有这些都应该像列一样并排排列，但是当描述结束时，它会下降到下一行。这可能非常简单，但我尝试了 float 和 inline-block 的各种组合但没有成功。

<div class="events">
<ul class="list-unstyled">
    <li>
        <div class="event-date">Jun 16 -
            <br />Jun 27</div><i class="glyphicon glyphicon-star">a</i>

        <div class="event-text">Opening Day for Faculty and Staff</div>
    </li>
    <li>
        <div class="event-date">Sep 10 -
            <br />Oct 08</div><i class="glyphicon glyphicon-star">b</i> <div class="event-text">Coffee with a Cop, 7:45 a.m. @ Cafeteria Courtyard</div></li>
    <li>
        <div class="event-date">Mar 12</div><i class="glyphicon glyphicon-ban-circle">c</i> <div class="event-text">Labor Day: Campus Closed</div></li>
</ul>

.list-unstyled {
    list-style: none outside none;
    padding-left: 0;
}
.events li {
border-bottom: 1px solid #4188d6;
margin-bottom:10px;
}
.event-date {
background-color: #74a2c2;
border-radius: 3px;
color: #ffffff;
display:inline-block;
font-weight: bold;
margin: 0px 10px 10px 10px;
padding: 5px;
width: 65px;
vertical-align:top
}
.event-text {
vertical-align:top;
display:inline;
border:1px solid green
}
i {
display:inline-block;
vertical-align:top;
border:1px solid red
}

http://jsfiddle.net/d4h2A/1/

Answer 1

使用您现有的 HTML(原样)，尝试以下 CSS:

.list-unstyled {
    list-style: none outside none;
    padding-left: 0;
}
.events li {
    border-bottom: 2px solid #4188d6;
    margin-bottom:10px;
    overflow: auto;
}
.event-date {
    background-color: #74a2c2;
    border-radius: 3px;
    color: #ffffff;
    font-weight: bold;
    margin: 0px 10px 10px 10px;
    padding: 5px;
    width: 65px;
    float: left;
}
.event-text {
    overflow: auto;
    border: 1px dotted gray;
}
i {
    float: left;
    vertical-align:top;
    border:1px solid red;
    margin-right: 10px;
}

查看演示:http://jsfiddle.net/audetwebdesign/y54Zb/

要允许 .event-text 的可变宽度，首先使用 float: left 为 .event-date 和 i(可选地，根据需要添加右边距)。

要在 li block 中包含 float 元素，请使用 overflow: auto。

最后，为 .event-text 应用 overflow: auto 以防止文本环绕 float 元素。

最终结果是，当您缩小窗口宽度时，文本将在图标旁边的左边缘开始换行。当您展开窗口时，对于足够宽的窗口，文本将只停留在一行上(如果这是一个问题，请使用最大宽度)。

您可能希望根据布局设计为文本 block 设置最小宽度。