1

2 つの div を隣り合わせに配置したいと思います。最初のものはテーブルとして表示され、もう 1 つはインライン div です。ここにいくつかのコードがあります: http://jsfiddle.net/WcHEc/

また、インライン コード。

HTML:

<div class="message-container">
    <div class="img-rounded small">
        <div class="img-centered-wrapper">
            <img src="/static/img/avatar" class="img-animal" />
        </div>
    </div>
    <div class="message-content">
        <p><strong>Some title</strong></p>
        <p>Some content</p>
    </div>
</div>

CSS:

.message-container {
    clear: both;
    display: inline-block;
}
.message-container .right {
    float: right;
    text-align: right;
}
.img-rounded {
    border: 1px solid #000;
    border-radius: 7px;
    display: table;
    float: left;
    height: 50px;
    width: 50px;
    margin-right: 15px;
    overflow: hidden;
}
.img-centered-wrapper {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.message-content {
    display: inline-block;
    float: right;
}
.img-animal {
    max-height: 45px;
    max-width: 45px;
}

div "message-content" が常に div "img-rounded" の右側に表示されるようにしたいと思います。ただし、「message-content」のコンテンツが多すぎる場合は、下に表示されます。私はしばらくの間それに苦労しており、それを機能させる方法がわかりません。何かお役に立てば幸いです。

編集

回答ありがとうございます。何が問題なのかを理解するのに役立ちました。

幅と高さは設定しませんでし.message-containerた。これは、境界線を使用しているため、コンテンツに収まるという考えだったからです。

したがってinline、固定幅を設定する代わりに、 として表示し続け、inline-blockに設定max-widthし.message-contentます。これは少し大きなコードです: http://jsfiddle.net/RpZcT/。

inlineの代わりに使用して同じ効果を達成する方法はありinline-blockますか? 前述のとおり、inline-block予期しない動作を引き起こす可能性があります。

4

2 に答える 2

1

次の幅を設定する必要があります.message content。

.message-content {
    display: inline;
    float: right;
    width: 300px;
}

したがって、次のようなものになりますhttp://jsfiddle.net/WcHEc/1/

于 2012-11-18T19:50:57.540 に答える
1

.message-containerラッパーとして機能するように設定します。これにより、後で頭を悩ませることがなくなります。両方を に設定divsしfloat:left;ます。これにより、それらも整列されます。

.message-container {
    clear: both;
    display: inline;
    width: 960px;
    height: auto;
}

注 1) で指定することをお勧めしますwidth。それ以外のdivs場合widthは auto または inherited になり、問題が発生する可能性があります。2)display: inline-block;一部のブラウザで を使用すると、予期しない動作が発生する可能性があるため、display: inline;.

こちらの例をご覧ください

于 2012-11-18T20:06:58.817 に答える