Форматирование встроенных элементов? Как выглядит общий код?

Question

Это общий новичок вопрос, так что спасибо заранее. Я пытаюсь разглядеть разницу между div и spans, а также когда и как их использовать.

Скажем, например, я хочу, чтобы изображение было оправдано, и я хочу, чтобы текст обходил изображение справа, сохраняя оправдание. Если текст проходит мимо изображения, я хочу, чтобы он обернулся вокруг нижней части изображения ... так же, как мы называем мир макета, «оберните».

Я ищу пример для ссылки, поэтому в своем ответе вы можете привести пример маркировки?

Огромное спасибо !!!

Answer 1

Тег SPAN не предназначен для контейнеров для других тегов. Это особенно полезно в сочетании с классами.

Использование divs для определения разделов страницы и охватывает, чтобы заключить и стилизовать текст или классы текста.

http://www.learnwebdesignonline.com/htmlcourse/span-div.htm показывает хороший пример того, как они используются. Для примера оберточной текста, всплывают изображение и обернуть все это в DIV - как так:

<div> 
test test test test <img src="" alt="" style="float:left;margin:8px 0 0 8px; display:inline" /> test test test test test test test test test test test test 
</div> 

Answer 2

Уровень блока означает, что он начинается по собственной линии по умолчанию, тогда как встроенный сидит рядом с другими элементами.

[Блок]

[Блок]

против

[встроенный] [встроенный]

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

<img src="picture.jpg" alt="An image" style="float: left" /> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eros. Curabitur posuere. Cras sodales leo quis mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum adipiscing nunc vel arcu. Ut sed quam non est molestie commodo. Suspendisse metus erat, cursus fermentum, faucibus nec, pulvinar et, lorem. Praesent odio. In interdum imperdiet enim. 

Answer 3

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

ДИВ

• это элемент уровня блока

• дисплей по умолчанию свойство представляет собой блок, который означает:

  • его так широко, как его контейнер
  • всегда делает разрывы строк до и после
• может содержать другие элементы уровня блока, как p, h1, table, ul, , div
• может содержать другие встроенные элементы, как img, strong, em, input, a, span

промежуток

• является встроенным элементом

• дисплея по умолчанию свойства рядное, что означает:

  • как узкий, как его содержание
  • не делает никакого разрыва строки, если не нужен)
  • вы можете использовать CSS свойство vertical-align с ним
• могут не содержат элементы уровня блока
• может содержать другие встроенные элементы, такие как img, strong, em, input, a, span

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

<span style="display:block"> 
    this will be displayed like a div, 
    but still cannnot contain block level elements 
</span> 

Поскольку они являются «общие» теги, они обычно используются для microformats в сочетании с классами. Например: <span class="tel">555-5555</span>, потому что нет метки <tel>.

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

<p><img src="image.jpg" style="float: right" alt="my image" />Long paragraph.</p> 

И нет дивы или пролетов. Однако, если это не так, то вы могли бы использовать:

<p>unrelated to the image</p> 
<div> 
<img src="image.jpg" style="float: right" alt="my image" /> 
<p>Long paragraph.</p> 
</div> 

Здесь div необходимо потому, что p является элемент уровня блока.

Наконец, для получения дополнительной информации вы можете проверить the official W3C spec topic о divs и spanans.