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

Question

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

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

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

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

Answer 1

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

Используйте div для определения разделов страницы и span, чтобы заключить и оформить текст или классы текста.

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

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

div

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

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

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

span

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

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

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

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

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

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

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

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

И никаких div или span не требуется. Однако, если это не так, вы можете использовать:

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

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

Наконец, для получения дополнительной информации вы можете проверить официальную тему спецификации W3C о div и span.