Научете как да накарате текст да се обвие около плаващо изображение с CSS.
За да накарате текста си да обвие изображението вдясно, подобно на начина, по който е на снимката, представяща тази статия, използвайте правило за CSS като това:
Правилото float: left кара изображението да се премести в лявото поле. Правилото за допълване вдясно предпазва текста от блъскане право в дясната страна на изображението. Ако към това изображение беше добавена граница, между изображението и границата ще дойде подплънката. Вижте Раздел 2 за работа с изображение с рамка.
След това добавете полета отляво и отдясно на изображението, за да го центрирате. Правилната стойност за лявото и дясното поле за центриране на всичко е автоматично.
За да създадете плътна рамка, подобна на рамка, като използвате стила на границата на канала, може да се използва правило като това:
Други стилове на граници са плътни, пунктирани, пунктирани, двойни, ръбове, вмъкване и начало. Ширината може да бъде изразена в пиксели, ems или проценти.
Границите могат да се прилагат избирателно в горната, дясната, долната и лявата част на изображението. Можете да използвате това знание, за да създадете ефект като падаща сянка.
Използвайки плътна рамка в 2 нюанса на сивото само върху дясната и долната граница, получавате ефект на падаща сянка.
img { float: left; border-right-style: плътен; граница-дясно-ширина: 8px; цвят на границата вдясно: #CCCCCC; Border-bottom-style: плътен; ширина на границата на дъното: 8px; цвят на границата на дъното: #999999; margin-right: 1em; margin-bottom: 1em; }
Бакшиш
Ако имате изображения в повече от едно разделение (div) на страница, използвайте селектори на потомци, за да ги стилизирате поотделно. Възможни селектори: #content img, #sidebar img, #feature img.
