Премахване на обвиването на текст около плаващ блок
Доста често в различни сайтове има изображение, което обвива текста на абзаца след него. Тази задача е много лесна за решаване. Трябва да добавите свойството float:left към изображението и текстът на следващия параграф ще го обвие.
Но какво ще стане, ако искате текстът на абзаца да изглежда като блок, следващ изображение, без да обвивате текста? Това изисква използването на различни трикове.
Този проблем обаче има много просто решение, което може да бъде много полезно в някои случаи.
Описание на проблема
Когато трябва да се справите с плаващи елементи, трябва да използвате трикове, за да предотвратите обвиването на текста под елемента. Проблемът възниква, ако височината на плаващия елемент е по-малка от височината на текста. Текстът започва да "пълзи" под елемента.
Но има просто решение.
Просто трябва да използвате следния CSS код за параграфа:
- Много прост метод.
- Не е необходимо допълнително маркиране.
- Без зависимост от плаващи елементи - параграфите могат да се използват отделно.
Този метод не работи в IE6. Ето защо трябва да бъдете много внимателни, тъй като в този браузър целият шаблон на страницата може да "плува".
Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: www.red-team-design.com/how-to-fix-wrapping-text-around-floated-elements Превод: Сергей Фастунов Урокът е създаден: 27 януари 2011 г. Прегледан: 37903 Правила за препечатване
5 последни урока от категорията "CSS"
Забавни ефекти за букви
Малък ефект с интерактивна анимация на букви.
Изпълнение на забавни съвети
Малка концепция за забавни съвети,които са реализирани в SVG и anime.js. В допълнение към специален стил, примерът реализира анимация и трансформация на графични обекти.
Анимирани букви
Експеримент: анимирани SVG букви, базирани на библиотеката anime.js.
POV слънчеви очила
Страхотен експеримент на уеб страница, която се показва „от първо лице“ през слънчеви очила.
Навигация в падащо меню
Експериментален навигационен скрипт за падащо меню.