Блог

Попытка отобразить список предстоящих событий с указанием даты (дат), значка и краткого описания. Все они должны выстраиваться рядом, как столбцы, но когда описание завершается, оно переходит к следующей строке. Это, вероятно, безумно просто, но я пробовал различные комбинации 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/

Используя существующий 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 for .event-date и i (необязательно, добавьте правое поле по мере необходимости).

Чтобы содержать плавающие элементы внутри li блоков, используйте overflow: auto .

Наконец, примените overflow: auto for .event-text , чтобы текст не обтекал плавающие элементы.

Конечным результатом является то, что при уменьшении ширины окна текст начнет переноситься с левого края рядом со значком. При расширении окна текст просто останется на одной строке для достаточно широкого окна (используйте max-width, если это проблема).

Возможно, вы захотите установить минимальную ширину для текстового блока в зависимости от вашего дизайна макета.