align two div in css

Question

У меня есть 2 div: avatar и secondClass. Я хочу, чтобы эти 2 div были выровнены, поэтому я даю им обоим атрибут css «display: inline-block»;

Внутри «secondClass» у меня есть div «сообщение», я это атрибут css «word-wrap: break-word».

«avatar» и «secondClass» выравниваются только тогда, когда «сообщение» не слишком длинное, и я хочу, чтобы они были выровнены независимо от того, что.

мой CSS являются:

.firstClass{ 
    width: 80%; 
} 

.avatar{ 
    display: inline-block; 
    padding-right: 5px; 
    vertical-align: top; 
} 

.secondClass{ 
    display: inline-block; 
    vertical-align: top; 
} 

.message{ 
    width: 50%; 
    -webkit-hyphens: auto; 
    -moz-hyphens: auto; 
    -ms-hyphens: auto; 
    -o-hyphens: auto; 
    hyphens: auto; 
    word-wrap: break-word; 
} 

и мой HTML код

<div class="firstClass"> 
    <div class="avatar"> 
     <a href="aaaa"><img src="avatar.jpg"></a> 
    </div> 
    <div class="secondClass"> 
     <div class="message"> 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
     </div> 
    </div> 
</div> 

<br> 

<div class="firstClass"> 
    <div class="avatar"> 
     <a href="aaaa"><img src="avatar.jpg"></a> 
    </div> 
    <div class="secondClass"> 
     <div class="message"> 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 
     </div> 
    </div> 
</div> 

Например, в этой скрипкой он работает с первой попытки, но не на втором: http://jsfiddle.net/ZZ8Dr/

Answer 1

Вы должны будете дать им max-width, так что avatar и secondClass оба не пройдут более 100% от firstClass. Посмотрите, что fiddle.

Например:

.secondClass{ 
    max-width: 80%; 
} 

.avatar{ 
    max-width: 20%; 
} 

Используйте box-sizing: border-box;, чтобы включать в себя поля и отступы в процентах расчета.

Answer 2

В этом случае я бы оставил .avatar поплавок влево. Тогда ширина .secondClass не важна для выравнивания.

.avatar { 
    float: left; 
} 

и в конце концов (если вы предпочитаете):

.secondClass { 
    margin-left: <width of .avatar>; 
}