Форум hotibo.ru
Сайты - по стандартам, но не стандартные сайты!
Страниц: 1
- Главная
- » Вёрстка по стандартам (x)HTML + CSS
- » Как сделать список в 2 колонки с неравными по высоте блоками
#1 13.11.2014 23:51
- azat.ak
- Новичок
- Зарегистрирован: 13.11.2014
- Сообщений: 1
Как сделать список в 2 колонки с неравными по высоте блоками
Здравствуйте, суть проблемы: есть родительский блок, с заданной высотой. Внутри него выводятся новости (блоки определенной ширины, но неравной высоты). Необходимо чтобы новости выводились в блок в 2 колонки, примерно так: 
Порядок не обязательно такой, как на рисунке, возможно и так: один блок в левую колонку, второй в правую (как при float: left). Главное вертикальные отступы между новостями были одинаковыми.
Пытался реализовать с помощью плавающих блоков
- , но везде одна и та же проблема: разные отступы.
Возможна ли реализация этого только лишь на html + css, т.к. не хотелось отдавать это на программную часть.
Привожу код того, что на 2 рисунке:
css
Код:
.cc-freshthemes {
float: left;
margin-top: 15px;
}
.cc-title {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #fff;
width: 439px;
height: 35px;
padding-top: 12px;
padding-left: 15px;
background-image: url(cc-titlebg.jpg);
}
.cc-ftbox {
float: left;
height: 260px;
}
.cc-ft-theme {
float: left;
width: 200px;
margin-left: 15px;
margin-right: 5px;
margin-bottom: 20px;
border: 1px solid #000;
}
.cc-ft-theme-descr a {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
text-decoration: none;
}
.cc-ft-theme-descr a:hover {
text-decoration: underline;
}
.cc-ft-theme-razdel {
color: #6c9eda;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
float: left;
}html
Код:
Свежие темы
Нет на форуме
#2 14.12.2014 00:28
- Seemann
- Новичок
- Зарегистрирован: 13.12.2014
- Сообщений: 2
Re: Как сделать список в 2 колонки с неравными по высоте блоками
Возникла точно такая же проблема(
Есть ли решение?
______
Как вариант решения данной проблемы можно использовать jQuery...
Хотелось бы конечно без него обойтись(
Отредактированно Seemann (14.12.2014 12:06)
Нет на форуме
#3 30.01.2015 08:54
- mascot
- Новичок
- Зарегистрирован: 29.01.2015
- Сообщений: 1
Re: Как сделать список в 2 колонки с неравными по высоте блоками
Почему бы не сделать так:
В блоке делаешь две колонки float и после очистка.
Блоки новостей размещаешь уже в эти колонки как
div-ы у которых верхнее и нижнее поле равны. За
счет схлопывания в нормальном потоке по вертикали
у тебя будет одинаковое расстояние между новостями.
Нет на форуме
Страниц: 1
- Главная
- » Вёрстка по стандартам (x)HTML + CSS
- » Как сделать список в 2 колонки с неравными по высоте блоками