Автоматическая упаковка <div>с динамической шириной

Question

Попытка создать поле, которое содержит предложения (с пробелами) и может иметь максимальную ширину 300 пикселей. Если текст слишком длинный, он автоматически обернется без полосы прокрутки.

EDIT:

На самом деле, я должен был упомянуть, что мне нужно будет оставить поле слева. Я помещаю это в виджет так:

<div>
    <div>left control</div>
    <div>text</div>
    <div>right control</div>
</div>

Это работает, за исключением случаев, когда я пытаюсь разместить фон следующим образом:

.rounded-reason {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    background-color:#ffffff;
    padding:10px;
    border: 2px solid red;
    margin-top:7px;
    margin-bottom:20px;
}

Фон слишком маленький. Это работает, если я не перемещаю «левый элемент управления» и «правый элемент управления», но я хочу, чтобы они отображались вверху окна, а не внизу.

Answer 1

Это должно быть сделано.

<div style="width: 300px;">
<p>
Quisque faucibus commodo diam, ut vehicula risus ultrices at? Curabitur tempus eros in velit malesuada sodales? Maecenas auctor nisl quis libero lobortis eget varius eros porta. Nunc mauris lacus, pretium eget viverra semper, rutrum et turpis! Integer viverra sem at odio faucibus at gravida neque consequat. Aenean viverra tellus id felis dapibus bibendum. Integer eget mattis nisl. Nunc nec turpis nec lacus varius sagittis non et sapien! Vestibulum porta ultricies rutrum. Vivamus lorem elit, luctus ac viverra a, porta et nibh. Praesent quam neque, scelerisque non pretium at, suscipit ac quam. Mauris varius ipsum sit amet massa tempus facilisis interdum eros rhoncus. In ac enim et ipsum convallis lacinia.
</p>

</div>

Свойство CSS height должно быть auto по умолчанию.Таким образом, если вы явно не определите высоту, она будет увеличиваться по высоте, чтобы заполнить свое содержимое (при условии, что содержимое не имеет position: absolute или float, что несколько изменит это поведение).

Обновление

Звучит так, как будто вы можете испытывать авто-коллапс родителя с плавающими детьми.

Вы можете исправить это следующим образом ... у каждого есть свои плюсы и минусы.

• Добавить overflow: hidden к родителю.Это, однако, отрубит все переполнения.
• Добавьте <span style="clear: both;"></span> или аналогичные под поплавками.Это добавляет дополнительный несемантический элемент.
• Плавающий родительский элемент.Это несовместимо со всеми макетами
• Использование псевдоселектора JavaScript или :after CSS для добавления элемента очистки (не поддерживается без JavaScript и не поддерживается IE 6/7 соответственно)