Текст обтекает плавающий div, но границы и <hr/"> s не делают

У меня есть div, который является float: right и это внутри родительского div. Внутри этого же родительского div также есть p элементов, и текст правильно обтекает float: right div.

Однако, если я устанавливаю элементы p чтобы они имели границу, или выполняю <hr/>, граница не останавливается там, где останавливается текст, а простирается за float: right div.

Вот прекрасное описание ситуации:

Обратите внимание, что зеленая часть черной горизонтальной линии находится за плавающим элементом div.

Как я могу получить границу или <hr/> или что-то еще, чтобы быть настолько широким, как текст, и не идти за div?

ОТВЕТЫ

Ответ 1

Я знаю, что эта проблема была опубликована некоторое время назад, но сегодня у меня была та же проблема и нашел другое решение:

http://jsfiddle.net/MvX62/

Я использую border-bottom вместо тега <hr /> и должен был добавить overflow: hidden;. Посмотрите на скрипку, я думаю, что это более полезно, чем принятое решение, потому что вы также можете добавить маржу к горизонтальной линии, и есть тот же пробел, что и текст.

Также вам не нужно определять значения z и не нуждаться в каких-либо хаках или обходных методах.

Ответ 2

У меня была эта проблема раньше, и я не был уверен, разрешима ли она.

В вашем случае, однако, вы можете обернуть зеленую рамку другим элементом и поменять margin на padding и установить его фон на #fff, чтобы закрыть линию нарушения.

Ответ 3

Посмотрите скрипку...

http://jsfiddle.net/UnsungHero97/8BwGB/3/

То, что я здесь делал, это предоставить элемент float a z-index CSS, который поместит его "выше" неплатируемого элемента (который имеет меньшую ценность z-index), а <hr /> не будет превышать плавающий элемент.

Что касается его ширины, как в тексте, в моем примере она такая же широкая, как и текст, но я не уверен, что это касается браузеров (я нахожусь в Chrome). Дайте мне знать, если это не так.

Надеюсь, это поможет. Христо

p.s. отлично mspaint skillz:)

Ответ 4

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

Ответ 5

Div не может обернуть другой div. Обтекание - это свойство только для текста. Вы можете имитировать обертывание, установив margin-right для главного div на ширину div, которую вы хотите его обернуть, но текст не будет течь под вложенным div.