float and inline-block

@feniks7 · Регистрация: 12.05.2013

Author24 — интернет-сервис помощи студентам

Здравствуйте, у меня сложилась такая проблема, надо срочно решить. У меня на странице должны идти 16 блоков по сетке 4 на 4. При уменьшении разрешения экрана блоки переходят на другие строки, делая тем самым по 3 блока в строке, 2 и 1 - при самом маленьком разрешении. Вобщем использовал float: left; для такого задания. Все шло отлично до тех пор пока не начал делать футер. Он впихивается на первую строку к этим блокам. Пробовал поменять float на inline-block, - элементы сетки сместились кто чуть выше кто чуть ниже.

Блоки имеют такие стили:

CSS

.content
{
    width: 228px;
    height: 310px;
    border-color: white;
    border-style: solid;
    border-radius: 7px;
    padding: 5px;
    display: inline-block;
    margin: 4px;
    -moz-box-shadow: 0 3px 1px rgba(0,0,0,0.3); /* Для Firefox */
    -webkit-box-shadow: 0 3px 1px rgba(0,0,0.3); /* Для Safari и Chrome */
    box-shadow: 0px 3px 1px rgba(0,0,0,0.3); /* Параметры тени */
    position: relative;
}

футер:

CSS

#footer
{
    position: relative;
    color: #858585;
    font-family: arial;
    width: 1000px;
    text-align: bot;
    margin-left:7%;
    font-size: 11px;
}

Vovan-VE · 26.06.2013, 16:13

См.: Таблицы или дивы?
Задавайте нужный vertical-aling этим inline-block'ам.

@feniks7 · 26.06.2013, 17:05 **[ТС]**

Спасибо) не указал vertical-align, теперь все исправил и все изящно

Vovan-VE 13208 / 6596 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	26.06.2013, 16:13	2
	См.: Таблицы или дивы? Задавайте нужный vertical-aling этим inline-block'ам. 1

@feniks7 1 / 1 / 0 Регистрация: 12.05.2013 Сообщений: 8
	26.06.2013, 17:05 [ТС]	3
	Спасибо) не указал vertical-align, теперь все исправил и все изящно 0