CSS - сделать текст абзаца обернуть вокруг изображения без поплавка

Question

я могу просто использовать float для достижения текста обернуть вокруг <img> элемента, и я понимаю, что <img> является встроенным элементом и <p> является элементом уровня блока так, чтобы сделать их рядными, я должен либо сделать <p> встроенным элементом, либо использовать вместо него <span>.

Дело в том, что если я рассматриваю их как встроенные элементы, он оставляет огромное пространство рядом с изображением и поверх текста.

Я хотел бы знать, что вызывает пустое пространство.

Вот мой JS Fiddle

Answer 1

Этот вопрос, как представляется, обеспокоены, почему над хау, поэтому я остановлюсь на внутреннюю работу:

The Visual formatting model раздел в CSS 2.1 спецификации описывает inline formatting contexts:

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

Свойство, которое они описывают, равно vertical-align, который принимает значение по-разному, baseline по умолчанию. Вот почему ваши два элемента inline выглядят так же, как и они, на сидя на базовой линии. Вы можете изменить <p> на vertical-align: top, а верхняя часть первой строки текста будет совпадать с верхней частью изображения. Тем не менее, вы по-прежнему получите разрыв между первой строкой текста и следующими строками.

Это потому, что текст является рендерингом line-box к другому, по вертикали. Независимо от того, будет ли линейная строка первой строки больше остальных, она все равно будет передавать по одному линейному ящику за раз. Вот визуализация этой концепции:

Другим важным понятием в понимании этого является то, что <img> является заменить встроенный элемент, который означает, что его внешний вид строится внешний ресурс за пределами документа.заменен inline элементов может принимать значение height, тогда как так называемый не замененный inline (например, <span>) элементов не может. Вот почему <img> <span>foo</span> может вести себя иначе, чем <span>foo</span> <em>bar</em> (потому что изображение имеет внутреннюю высоту), хотя они все встроенные элементы. Представьте себе, установив высоту изображения на й высоту текста - было бы эффективно оказывать такие же, как ваш образ, но и в этом случае он ведет себя точно так, как и следовало ожидать:

img { 
 
    height: 10px; 
 
    } 
 

 
p { 
 
    display: inline; 
 
    }

<div> 
 
    <img src="http://placehold.it/100x100/E8117F/000.png"> 
 
    <p>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p> 
 
</div>

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

Сравните эту информацию с тем, что спецификация говорит о floats:

Поплавок находится поле, которое смещается влево или вправо на текущей строке. Наиболее интересной характеристикой поплавка (или «плавающего» или «плавающего») является то, что содержимое может протекать вдоль его стороны (или запрещается это делать с помощью свойства «clear»). Содержимое течет вниз с правой стороны левого плавающего поля и вниз по левой стороне прямоугольного окна.

Поплавковая коробка сдвигается влево или вправо, пока ее внешняя кромка не коснется края блока или внешнего края другого поплавка. Если есть линейный ящик, внешний верх плавающего поля выравнивается с верхней частью текущего строкового блока.

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

Answer 2

Это не CSS, но использовать ALIGN = «влево» в IMG тег является альтернативой.

<img src="http://dummyimage.com/100x100/000/fff" align="left"> 

Answer 3

Попробуйте сделать образ абсолютным, а затем использовать смежный селектор родственного, чтобы добавить отступов к следующему пункту тегу для компенсации изображения. Fiddle здесь: http://jsfiddle.net/r2MFz/3/

Вот CSS.

img:first-of-type + p { 
    padding-left: 110px; 
    display: inline-block; 
} 

p { 
    padding-bottom: 20px; 
} 

img { 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Это становится довольно креативным, кроме этого я не могу придумать никакой другой вариант, кроме поплавка.

Answer 4

Причина пропусков, вероятно, вызвана отсутствующим имуществом vertical-align. Если вы включите свойство vertical-align: top, первая строка абзаца будет перенесена в верхнюю часть. Единственная проблема в том, что все еще есть пробел.

Это то, что я имею в виду: http://jsfiddle.net/7t633/5/

CSS

p { 
    display: inline; 
    vertical-align: top; 
} 

Но если вы измените CSS немного для обоих img и p вы можете достичь float эффекта без использования float собственности , Единственное, что текст не будет обтекать изображение. Для этого вам нужно использовать свойство float.

Это то, что я имею в виду: http://jsfiddle.net/7t633/6/

CSS

img { 
    display: inline; 
    position: absolute; 
} 
p { 
    display: inline-block; 
    margin-left: 105px; 
    vertical-align: top;  
} 

Answer 5

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

http://baconforme.com/

Answer 6

Как вы говорите, вы можете легко преодолеть эту проблему с помощью поплавка.Эта статья рассказывает о формах и поплавком, так что это хорошая ссылка: How to wrap text around an image using HTML/CSS

Поэтому, если вы просто спросить, что вызывает пропуски, вы действительно спрашиваете, как делает синтаксический браузера и процессы рендеринга относятся к поплавки. Короче говоря, в то время как токенизация и синтаксический анализ сложнее, основная идея остается в том, что браузер выводит вывод на экран в формате слева направо, сверху вниз. Поэтому, если вы сначала поместите свой тег изображения в качестве наследуемого встроенного элемента, он будет требовать столько экранной недвижимости (рендеринга на экране), сколько необходимо для отображения. Мы отобразили слева направо, сверху вниз, так что последнее пятно, на котором закончилось указатель рендеринга, было внизу справа от изображения. Если вы измените следующий тег, на том же уровне дерева, чтобы быть встроенным, он просто знает, как продолжить, когда указатель изображения остановился. Указатель указывает, что я должен начать рисовать слова в теге абзаца. Поскольку я знаю значения по умолчанию для тега абзаца, я собираюсь вскочить и сделать письмо на соответствующую высоту и ширину.

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

Вот хорошие источники для этого: http://taligarsiel.com/Projects/howbrowserswork1.htm#Parsing_general http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

Answer 7

Вам нужно сделать изображение встроенным и плавающим, а не текстом. Это способ заставить изображения вести себя, по крайней мере, с «98», возможно, раньше, но я начал работать только с текстовым процессором с «98». По некоторым причинам изображения решить поток текста ;-)

img { 
 
    float:left; 
 
    display:inline-block; 
 
    margin:10px; 
 
    
 
}

<div class="hoge"> 
 
    <img src="http://dummyimage.com/100x100/000/fff"> 
 
     <p>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p> 
 
</div>

Answer 8

Только дайте ALIGN = «левый» атрибут в IMG тег весь текст будет обернуть вокруг изображения. <img src="" align="left"> Your text . . .