Как выровнять плавающие элементы в нижней части их контейнера

Question

Простой вопрос, но я борюсь с решением.

Jsfiddle here.

Как я могу получить название и дату и выровнять на дно контейнера, обеспечивая при этом:

• Длина заголовка будет толкать дату через (но не нужно обернуть)
• синяя кнопка всегда в центре выровнена между датой и красным значком
• контейнером Titlebar всегда одинакова с фиксированной высотой
• нужны CSS-единственным решением, если это возможно - я уже знаю, как сделать это с JS, если необходимо

HTML:

div class="titlebar bgEarth0"> 
    <h1 id="title">Test Title</h1> 
    <h2 id="date">23 October 2013</h2> 
    <div class="icon"></div> 
    <div class="buttonArea"> 
     <div class="button"></div> 
    </div> 
</div> 

CSS:

.titlebar { height: 50px; border:1px solid #000} 
#title {font-size: 20px; font-weight: normal; float: left; margin:0} 
#date { font-size: 12px; font-weight: normal; float: left; margin-left: 30px; margin:0 12px} 
.buttonArea {position:relative; overflow:auto; height:40px; margin-top:5px} 
.button {margin:0 auto; width:60px; height:40px; background:#0000ff} 
.icon {float:right; background:#ff0000; height:40px; width:60px; margin-top:5px} 

Answer 1

http://jsfiddle.net/hC236/

Вы можете использовать абсолютное положение. Завершите заголовок и дату с помощью div и установите его абсолютное положение.

HTML:

<div class="titlebar bgEarth0"> 
    <div class="bleh"> 
     <h1 id="title">Test Title</h1> 
     <h2 id="date">23 October 2013</h2> 
    </div> 
    <div class="icon">ddd</div> 
    <div class="buttonArea"> 
     <div class="button"></div> 
    </div> 
</div> 

УС:

.titlebar { 
    height: 50px; 
    border:1px solid #000; 
    position: relative; 
} 
.bleh { 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
} 
#title { 
    font-size: 20px; 
    font-weight: normal; 
    float: left; 
    margin:0 
} 
#date { 
    font-size: 12px; 
    font-weight: normal; 
    float: left; 
    margin-left: 30px; 
    margin:0 12px 
} 

.buttonArea { 
    position: absolute; 
    overflow:auto; 
    height:40px; 
    top:5px; 
    right: 0px; 
} 

.button { 
    margin:0 auto; 
    width:60px; 
    height:40px; 
    background:#0000ff 
} 

.icon { 
    background:#ff0000; 
    height:40px; 
    width:60px; 
    margin-top: 5px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 

ИЛИ Таблица Пример:

http://jsfiddle.net/hjM56/

HTML:

<div class="titlebar"> 
    <div class="col-1"> 
    <h1 id="title">Test Title</h1> 
    <h2 id="date">23 October 2013</h2> 
    </div> 
    <div class="col-2"> 
    <div class="icon"></div> 
    </div> 
    <div class="col-3"> 
    <div class="button"></div> 
    </div> 
</div> 

CSS:

.titlebar { 


display: table; 
    height: 50px; 
    border: 1px solid #000; 
    width: 100%; 

} 

.col-1, 
.col-2, 
.col-3 { display: table-cell; } 

.col-1 { 
    white-space: nowrap; 
    vertical-align: bottom; 
    width: 1%; 
} 

.col-2 { 
    text-align: center; 
    width: auto; 
} 

.col-3 { 
    text-align: right; 
    width: 1%; 
} 

#title { 
    font-size: 20px; 
    font-weight: normal; 
    display: inline-block; 
    margin: 0px; 
    padding: 0px; 
} 

#date { 
    font-size: 12px; 
    font-weight: normal; 
    margin-left: 12px; 
    margin-top: 0px; 
    margin-right: 12px; 
    margin-bottom: 0px; 
    display: inline-block; 
    padding: 0px; 
} 

.button { 
    width: 60px; 
    height: 40px; 
    background: #0000ff; 
    margin-top: 5; 
    display: inline-block; 
} 

.icon { 
    background: #ff0000; 
    height: 40px; 
    width: 60px; 
    margin-top: 5px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
} 

Answer 2

Вы не должны использовать парил, если это необходимо. См. Этот JSFiddle Live Demo

В принципе, если вы удалите поплавки и display:inline-block;, они будут выровнены. Я также удалил overflow:auto, так как это ограничило бы область значков.

Кроме того, добавление left:15%; приведет к выравниванию синей области между датой и красной областью.

EDIT: Пример с параметрами максимальной ширины для содержания div внутри строки заголовка. Live Demo

Answer 3

Вот один из способов сделать это, но она включает в себя некоторые дополнительные наценки.

Я добавил некоторые обертками вокруг названия и даты следующим образом:

<div class="titlebar"> 
    <div id="titleArea"> 
     <div id="table-wrap"> 
     <div id="table-cell"> 
      <h1 id="title">Test Title</h1> 
      <h2 id="date">23 October 2013</h2> 
     </div> 
     </div> 
    </div> 
    <div class="icon"></div> 
    <div class="buttonArea"> 
     <div class="button"></div> 
    </div> 
</div> 

Примените следующий CSS:

.titlebar { 
    height: 50px; 
    border:1px solid #000 
} 
#titleArea { 
    height:40px; 
    margin-top:5px; 
    float: left; 
} 
#table-wrap { 
    display: table; 
    height: 100%; 
} 
#table-cell { 
    display: table-cell; 
    height: 100%; 
    vertical-align: bottom;  
} 
#title { 
    font-size: 20px; 
    font-weight: normal; 
    padding:0; 
    display: inline; 
} 
#date { 
    font-size: 12px; 
    font-weight: normal; 
    padding-left: 12px; 
    display: inline; 
} 
.buttonArea { 
    position:relative; 
    overflow:auto; 
    height:40px; 
    margin-top:5px; 
    border: 1px dotted blue; 
} 
.button { 
    margin:0 auto; 
    width:60px; 
    height:40px; 
    background:#0000ff 
} 
.icon { 
    float:right; 
    background:#ff0000; 
    height:40px; 
    width:60px; 
    margin-top:5px; 
    border: 1px dotted blue; /* for demo only */ 
} 

См демо по адресу: http://jsfiddle.net/audetwebdesign/5NDDQ/

Я создал внешнюю оболочку #titleArea который имеет ту же высоту и верхнюю границу, что и #buttonArea.

Внутри #titleArea я создал таблицу CSS/table-cell (два вложенных div), чтобы получить вертикальное выравнивание в нижней части.

И наконец, я установил display: inline в #title и #date.

Деталь, которая может потребовать корректировки, включает базовую линию названия и времени. Нижняя строка приводит к тому, что текст немного сидит над нижним краем кнопки.

Похоже, что большая работа для того, что кажется относительно простым требованием.

Чтобы сделать это немного больше пуленепробиваемый, я хотел бы добавить мин ширину к .titlebar, чтобы предотвратить .buttonArea развивать горизонтальную полосу прокрутки и .icon от упаковки до второй линии.