Прекратить перенос текста вокруг плавающего элемента div

Question

Прекратить перенос текста вокруг плавающего элемента div

0

Я пытаюсь создать малый сетчатый макет. Однако при использовании float текст на самом деле больше, чем плавающий div, и обтекает его.

Есть ли способ остановить перенос текста вокруг div, но мне все еще нужны, чтобы divs сидели рядом друг с другом.

http://jsfiddle.net/4P35M/

CSS:

.left-note-feed {
    width: 50%;
    background-color: orange;
    overflow: auto;
}
.note-container {
    margin: 15px;
}
.note-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    background-color: #000
}
.note-content {
    float: left;
    margin-left: 10px;
}

HTML:

<div class="left-note-feed">
    <p>Show Notes Feed</p>
    <div class="note-container">
        <div class="note-avatar"></div>
        <div class="note-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, molestias nulla consequatur laborum harum obcaecati sunt voluptates. Soluta, accusantium, facere saepe minus quaerat libero nisi error magnam quidem enim eius!</p>
        </div>
    </div>
    <div class="note-container">
        <div class="note-avatar"></div>
        <div class="note-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, molestias nulla consequatur laborum harum obcaecati sunt voluptates. Soluta, accusantium, facere saepe minus quaerat libero nisi error magnam quidem enim eius!</p>
        </div>
    </div>
</div>

crush 16 янв. 2014, в 19:07

Источник

1

Я не понимаю проблему. В твоей скрипке я вижу текст под большими точками.
j08691 16 янв. 2014, в 17:31
0

Кроме того, в вашем коде выше у вас есть два объявления с float для note-content . Вам нужно добавить один в .note-avatar и удалить оба из .note-content .
disinfor 16 янв. 2014, в 17:35
0

@ j08691 Я думаю, что автор хочет разместить аватар и контент рядом друг с другом, а не один над другим.
crush 16 янв. 2014, в 17:36
2

Если вы хотите, чтобы текст располагался рядом с аватаром, вам нужно указать ширину для div .note-content, например 75%
David Randall 16 янв. 2014, в 17:37

Показать ещё 2 комментария

Теги:

html

css

2 ответа

Ещё вопросы

Я не понимаю проблему. В твоей скрипке я вижу текст под большими точками.
Кроме того, в вашем коде выше у вас есть два объявления с float для note-content . Вам нужно добавить один в .note-avatar и удалить оба из .note-content .
@ j08691 Я думаю, что автор хочет разместить аватар и контент рядом друг с другом, а не один над другим.
Если вы хотите, чтобы текст располагался рядом с аватаром, вам нужно указать ширину для div .note-content, например 75%

crush · Answer 1 · 2014-01-16T16-14-00.000Z

Основываясь на вашем вопросе, кажется, что вы хотите разместить аватар рядом с контентом, а не обертывать контент под аватаром.

Так как вы знаете, насколько велика аватара, отпустите float от содержимого и установите его margin-left на размер аватара.

JS Fiddle

.note-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    float: left;
    background-color: #000;
}

.note-content {
    margin-left: 60px;
}

Если, случайно, вы действительно хотели, чтобы содержимое обернулось под аватаром, вы могли бы поместить аватар влево и настроить display содержимого как inline:

JS Fiddle

.note-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50px;
    float: left;
    background-color: #000;
    margin-bottom: 10px;
    margin-right: 10px;
}

.note-content {
    display: inline;
}

Kevin Bowersox · Answer 2 · 2014-01-16T15-43-00.000Z

Укажите ширину для .note-content

.note-content {
    float: left;
    margin-left: 10px;
    width: 285px;
}

Также он выглядит лучше с удалением из тега p:

.note-content p{
    margin-top: 0px;
}

С другой стороны, тег p не нужен.

JS Fiddle: http://jsfiddle.net/4P35M/8/