css - 在css中对齐两个div

Question

我有 2 个 div：头像和 secondClass。我希望这 2 个 div 对齐，所以我给他们两个 css 属性“显示：内联块；”

在“secondClass”中，我有 div“消息”，我是 css 属性“word-wrap: break-word;”。

“avatar”和“secondClass”仅在“message”不太长时对齐，无论如何我都希望它们对齐。

我的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所以两者都不会超过 100% 。看看那个小提琴。avatarsecondClassfirstClass

For example:

.secondClass{
    max-width: 80%;
}

.avatar{
    max-width: 20%;
}

Use box-sizing: border-box; to include margin and padding in the percentage calculation.

Answer 2

In this case, I'd let .avatar float left. Then the width of .secondClass is not important for the alignment.

.avatar {
    float: left;
}

and eventually (if you prefer):

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