Текст обтекает плавающий 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.