Проблемы с принудительным переносом текста - PullRequest
Новая
       17

Проблемы с принудительным переносом текста

0 голосов
/ 21 января 2012

Я пытаюсь поместить несколько сообщений в нитевидный макет. Чтобы увидеть результат того, что у меня есть, перейдите сюда: http://jsfiddle.net/sunjay03/Aykqc/embedded/result/

Если вы отрегулируете ширину экрана, вы увидите, что текст в нижнем сообщении размещается неправильно. Кроме того, я не могу заставить дату всегда идти в самый правый угол экрана.

Вот ссылка на полный jsfiddle: http://jsfiddle.net/sunjay03/Aykqc/

Вот несколько изображений того, что я хотел бы случиться: preview with large width enter image description here

Любая помощь?

Ответы [ 2 ]

1 голос
/ 21 января 2012

Я возился с твоей скрипкой и сделал из этого:

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;
}

Ты так хочешь?

1 голос
/ 21 января 2012

Как это jsFiddle ?

HTML : 

<div class="container">
    <div class="name">John Smith</div>
    <div class="date">Nov. 15, 2010</div>
    <div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div>
</div>
<div class="container">
    <div class="name">John Smith</div>
    <div class="date">Nov. 15, 2010</div>
    <div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div>
</div>
<div class="container">
    <div class="name">John Smith</div>
    <div class="date">Nov. 15, 2010</div>
    <div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div>
</div>

CSS :

.name {
    float:left;
}
.date {
    float:right;
}
.content {
    clear:both;
}
.container {
    overflow:auto;
    padding-left:115px;
    background: url(http://www.sunjay.ca/images/logo_notext.gif) no-repeat;
    min-height: 110px;
    margin-bottom: 20px;
}
...