Исправить выравнивание двух дочерних divs

Question

Проект предназначен для создания веб-сайта для микро-блогов, подобного Twitter. Я решил назвать сайт Chirper (насколько я умный). Каждый пост структурирован родительским div, div div и div div. Разделы аватара и содержимого отображаются в строке, но они не выровнены правильно. Любая помощь приветствуется.

HTML:

<div class="chirp"> 
<div class="chirp_avatar_region"> 
    <img src="img/avatar/default.png" alt="Avatar" width="64" height="64"> 
</div> 
<div class="chirp_content"> 
    <p> 
     <a href="users.php?uid=15">USER</a> 
     <span class="timeStamp">2013-11-22 16:43:59</span> 
    </p> 
    <p> 
     COMMENT 
    </p> 
    <p> 
     <a href="repost.php?cid=24">ReChirp!</a> 
    </p> 
</div> 

В DIV-х не выровнены, как я хочу, чтобы они были (уровень и 100% от родителей).

Я не могу добавлять изображения, так вот ссылка на страницу Imgur: http://imgur.com/Mn9mE5q

Соответствующий CSS:

body { 
    font-family: Verdana, Geneva, sans-serif; 
    color: #000; 
    background-color: #666; 
    font-size: 1em; 
} 

/* Containers */ 

div { 
    margin-top: auto; 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 10px; 

    border-style: solid; 
    border-width: 3px; 
    border-color: #000; 

    padding: 10px; 
} 

div.pane { 
    width: 70%; 
    background-color: 0099FF; 
} 

div.chirp { 
    border-width: 1px; 
    margin-bottom: -1px; 
    width: 80%; 

    padding: 5px; 
} 

div.chirp_avatar_region { 
    display: inline-block; 

    width: 10%; 
    height: 100%; 

    text-align: center; 

    /*border-style: none;*/ 
} 

div.chirp_content { 
    display: inline-block; 

    width: 80%; 
    height: 100%; 

    /*border-style: none;*/ 
} 

div.chirp_avatar_region > img, div.chirp_content > p { 
    margin-top: 0; 
    vertical-align: middle; 
} 

Answer 1

Придайте avatar_region поплавком: слева, и удалить его ширину: и высота: настройка. Удалите div chirp_content, он обходит инкрустацию.

Answer 2

Не совсем уверен, но я думаю, что, определяя положение: встроенный блок, он помещает их в одну строку и делает высоту строки высотой контейнера chirp_content. В каком-то смысле. Устанавливается в вертикальное положение: сверху; и он должен ее решить.

Ex.

.chirp_content, .chirp_avatar_region{ vertical-align:top; } 

JS Fiddle

Answer 3

Вы можете плавать свои внутренние дивы затем снимите поплавок после контейнера

или

использование вертикального выравнивания: верх, чтобы расположить дивы в верхней части контейнер