Это заголовок. Он расположен на уровне картинки, предшествующей заголовку в коде.

Первый параграф текста. Это именно параграф, то есть у него есть отступ первой строки. Простой текст после заголовка всегда становится параграфом. Перед заголовком в начале секции с id=»1″ в нашем случае лежит только одно фото, которое завернуто в дивизию с class=»w75 h20″. Первое класс w75 означает, что ширина блока фото будет 75% от ширины окна. Второй класс h20 означает, что высота будет 20% от ширины окна.

Второй параграф текста. Теперь, чтобы текст стал параграфом, перед ним в коде есть пустая строка.

Это третий параграф. В нем отмечаем, что картинки в секциях всегда сдвигается вправо, а текст, включая заголовки, их обтекает слева.

Заголовок второй секции

В этой секции два фото. Они вписаны в дивизии с классами w30 h30. Смысл чисел тот же. Здесь ширина равна высоте.

Но фото в этой секции расположены неестественно — первое фото правее второго. Это в принципе допустимо, только понимать нужно.

Заголовок третьей секции

Фото справа теперь обернуты в дивизию с классом foto50. Число означает, что все фото вписываются в блок, выровненый вправо, с шириной в 50% экрана. Обертка с классом foto50 обеспечивает правильный порядок фото внутри него, то есть первое фото слева, второе — правее, и так далее.

Но теперь, когда фото внутри дивизии .foto50, проценты ширины и высоты фото считаются не от ширины окна, а от ширины дивизии. И поскольку классы дивизий здесть остались прежними «w30 h30», то результат выглядит коряво. Чтоб не оставалось пустых мест, классы надо бы заменить на «w50 h50».

Заголовок четвертой секции

Фото здесь теперь одно. Но класс его обертки изменен на «w100 h50». Теперь высота отличается от ширины и фото вписывается не в квадрат, а в прямоугольник. Ширина фото теперь определяется дивизией с классом .foto50.

Это наиболее подходящий формат для файлов с отчетами. Там будет по ситуации менять только высота картинки, то есть в классе h50 может быть другое число.

Напоследок отметим, что числа в классах оберток для фото не могуть быть произвольными. Их ОБЯЗАТЕЛЬНО надо выбирать из следющих рядов.
Для классов обёртки .foto# вместо # можно ставить: 100, 70, 50, 40, 30.
Для классов ширины .w# вместо # можно ставить: 100, 80, 75, 70, 67, 60, 50, 40, 30, 33, 25, 20.
Для классов высоты .h# вместо # можно ставить: 200, 150, 120, 100, 90, 80, 70, 60, 50, 45, 40, 35, 30, 25, 20.

Если использовать в классе неразрешенное число, фото совсем не отобразится.