html - 无法强制文本换行

Question

我正在尝试将几条消息放在类似线程的布局中。要查看我的结果，请转到此处:http://jsfiddle.net/sunjay03/Aykqc/embedded/result/

如果调整屏幕宽度，您会看到下方消息中的文本布局不正确。除此之外，我似乎无法让日期始终显示在屏幕的最右侧。

这是完整 jsfiddle 的链接:http://jsfiddle.net/sunjay03/Aykqc/

以下是我希望发生的事情的一些图片:

有什么帮助吗？

Answer 1

我摆弄了你的 fiddle 并做出了这个:

http://jsfiddle.net/S7drj/1/

HTML:

<div class="messages">
    <div class="message">
        <div class="message-image">
            <img src="http://www.sunjay.ca/images/logo_notext.gif" alt="profile_image">
        </div>
        <div class="message-body">
            <div class="message-name">
                <span class="message-date">Nov. 15, 2010</span>
                <h3>John Smith</h3>
            </div>
            <div class="message-text">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
    </div>
    <div class="message">
        <div class="message-image">
            <img src="http://www.sunjay.ca/images/logo_notext.gif" alt="profile_image">
        </div>
        <div class="message-body">
            <div class="message-name">
                <span class="message-date">Nov. 15, 2010</span>
                <h3>Joe Smith</h3>
            </div>
            <div class="message-text">
                <p>Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</p>
            </div>
        </div>
    </div>
</div>

CSS:

body
{
    margin: 20px;
}

.message
{
    padding: 2px;
    margin: 2px;
    clear: both;
    width:100%;
}

.message .message-image
{
    padding: 5px;
    float:left;
}

.message .message-body
{
}

.message .message-body .message-name
{
}

.message .message-body .message-name h3
{
}

.message .message-body .message-text
{
}

.message .message-body .message-date
{
    float: right;
}

这是你想要的吗？