Как использовать плавание CSS, не скрывая части DIV
gem должен был поместить исполняемый скрипт rails в то же место, что и ruby. Я бы заглянул туда и удостоверился, что права доступа установлены правильно и они исполняемы.
3 ответа
Вот одно решение:
<div style="background-color:red;border:thin black solid;overflow:hidden;">Some sample text</div>
В основном магия здесь overflow: hidden , которая изменяет модель визуального форматирования CSS. Взгляните на Основы компоновки CSS, часть 5: floats :
Исправление соседних блоков
Давайте посмотрим на красную границу абзаца проблема первая. Причина граница абзаца появляется позади изображение потому что поплавки не переставить блоки блоков, которые рядом с ними. В этом примере плавающее изображение только подталкивает линию прямоугольники внутри абзаца. Так текст сдвинут вправо, но фактическое поле абзаца все еще простирается на всю ширину контейнер.
Исправление этой проблемы происходит от очень хорошо спрятанный абзац в плавающий раздел CSS 2.1 спецификация:
Граница таблицы, заменяемый элемент на уровне блока или элемент в нормальном потоке, который устанавливает новое форматирование блока контекст (например, элемент с 'переполнение' кроме 'видимого') должно не перекрывать поплавки в одном контекст форматирования блока как сам элемент.
Таким образом, чтобы наш блок абзаца не перекрывая плавающий контент, решение - создать «новый блок контекст форматирования »в CSS терминология автора спецификации. Звучит сложно, а? К счастью, это не так уж и сложно. Новое форматирование блока контексты создаются любым блоком который соответствует этим критериям:
- плавающий
- абсолютно позиционированный
- имеет значение свойства отображения одного из более необычных ароматов (inline-block, table-cell и т. д.)
- имеет свойство переполнения, отличное от видимого.
Последний вариант - тот, который является проще всего сделать в большинстве случаев: установка overflow: auto в нашем абзаце будет создать новый «форматирование блока» context »и отобразить абзац граница в нужном месте.
Вы должны указать другой столбец как float left. То, что у вас есть прямо сейчас, текст слева будет обтекать плавающий текст справа. Также было бы разумно указать размер плавающего объекта слева.
<html>
<div style="width:400px">
<div style="width:150px;float:right;border:thin black solid">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
<div style="background-color:red; width: 250px; border:thin black solid">Some sample text
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div></div>
</html>
Также рассмотрите возможность использования CSS, это упростит долгосрочное сопровождение этого кода <<
РЕДАКТИРОВАТЬ: Я подумал Вы хотели, чтобы все переместилось влево. Думаю, я неправильно понял ваш вопрос. То, что вы пытаетесь сделать, невозможно. Лучшее, что вы можете сделать, - либо указать поле объекта, перемещаемого вправо, равным 400–150 (250 пикселей), либо указать ширину объекта «некоторый текст» равной (250 пикселей).
Я думаю, что вам нужно сделать только одно:
- Дайте div "образец текста" правое поле, большее, чем ширина элемента, плавающего вправо
Это должен это сделать.
Изменить: На основе вашего редактирования я бы посоветовал вам использовать диапазон (встроенный элемент) вместо div (элемент блока). Если вам всегда нужно, чтобы он находился в отдельной строке, вы можете дать этому элементу и элементу после него clear: left.