- bohdan@gmail.com
- +38 097 3763783
- Київ
Порада для програмерів-верстальників. Як позбутися проблеми з перескакуванням при різновисоких колонках у div.верстці..
При верстці таблицями цієї проблеми не виникало:
Блок 1 | Блок 2 | Блок 3 |
Блок 4 | Блок 5 | Блок 6 |
Цей код давав нам змогу мати те, що ми намагаємося добитися div’ами.
При цьому при збільшенні висоти однієї з чарунок при розширенні її змісту, межа між двома колонками, кожна з яких містить по три чарунки, однаково опускалася вниз..
div’и дозволяють це зробити шляхом створення однакових за шириною блоків:
html:
css:
#mylist{padding:0; margin:0;}
#mylist li{float:left; display:block; width:100px;}
Але!!! Якщо один з блоків має задовгий текст, то станеться отаке:
Донедавна я не міг вирішити проблему. Навіть головна сторінка мого сайту має мала таку ваду.. Коли текст завеликий, то він вилазив за межі блоку. Бо я, остерігаючись, що блок не перескочив, примусово йому присвоїв певну висоту. Це незручно, бо не можна довший текст додати до вступу..
Сьогодні знайшов вирішення.
html:
css:
#mylist{padding:0; margin:0;}
#mylist li{float:left; display:block; width:100px;}
#mylist .clear{clear:both;}
Все дуже просто.. Для того, щоб четвертий блок починався з нового рядка не зважаючи ні на що, ми обрубуємо обтікання третього останнього блоку і примусово вказуємо четвертому початися з нового рядка:
Ніби все правильно. Якщо не так – підправте.
P.S. Дехто висловлював зауваження, що css-властивості прописані прямо в коді. Зразу зауважу, що приклад наведений для наочності і через те все прописане прямо в рядку. Хоча, з теперішніми вимогами до верстки, треба чітко розділяти сам код і css, тому рядків на зразок style=”” мати не бажано.