Как сделать врезку на web-странице
Шаблон оформления "врезка" позволяет размещать слева или справа от основной статьи дополнительные блоки с контентом. Это делают как с целью привлечения внимания читателя, так и напротив, отвлечения его на рекламу или стороннюю информацию, не имеющую прямого отношения к основному содержимому.
Средствами CSS3 сделать врезку очень просто - достаточно определить небольшой стилевой класс, например, для "правой" врезки такой:
<style>
.pull-right {
float: right; /* прижимать врезку вправо */
width: 15%; /* рекомендуемая ширина */
min-width: 200px; /* минимальная ширина, если указана width */
padding: 10px; /* внутренний отступ от рамки блока */
margin: 10px; /* внешний отступ от рамки блока */
border: 1px dotted red; /* рамка блока */
background-color: transparent; /* прозрачный фон */
color: #000; /* цвет текста */
line-height: 120%; /* минимальная высота строки текста */
text-align: center; /* выравнивание текста */
}
</style>
(разумеется, почти все свойства могут быть изменены по вашему вкусу) и применить стиль перед тем абзацем текста, рядом с которым вы хотите позиционировать врезку:
<div class="pull-right">Текст врезки.</div> <p>Текст...
#собакен
Если не "лепить" две врезки подряд так, чтобы они относились к одному абзацу или двум коротким последовательным абзацам, а также не размещать врезку в самом конце обычного текстового потока, занимающего всю ширину страницы, то проблемы с clear: both будут не слишком актуальны и врезка будет вести себя прилично, как та, что помещена справа на этой странице.
Тем не менее, "рвать макет" при неумеренном использовании "плавающие" врезки отлично умеют, а как этого избежать написано по последней ссылке.
Например, я добавлю сюда пару пустых абзацев вида <p> </p>, чтобы выноска с датой и рейтингом статьи, не имеющая установленного свойства clear: both;, не оказалась левее этой довольно высокой врезки.
15.09.2022, 13:19 [349 просмотров]