Question

尝试显示即将发生的事件列表，显示日期，图标和简要说明。所有这些应该像列一样并排排列，但是当描述包装时，它会下降到下一行。这可能非常简单，但是我尝试了浮点数和内联块的各种组合但没有成功。

<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块中包含浮动元素，请使用overflow: auto。

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

最终结果是，当您缩小窗口宽度时，文本将开始环绕图标旁边的左边缘。当您展开窗口时，文本将保持在单行上以获得足够宽的窗口（如果这是一个问题，请使用max-width）。

您可能需要根据布局设计为文本块设置最小宽度。

列表中的并排div

1 个答案: