Разделы по бокам в списках

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 используйте overflow: auto.

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

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

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