DIV встроенный блок не выравнивается по горизонтали

-2

У меня есть пять столбцов, которые я выровнял с помощью display:inline-block. Он отлично работает, но есть одна проблема. Когда я обновляю страницу примерно 4 или 5 раз, в то время как первый столбец находится наверху, остальные 4 столбца уходят в нижнюю часть, а когда я снова обновляюсь, он возвращается к исходному месту. Я не мог понять, что вызывает это, и содержимое внутри столбцов поступает из базы данных. может кто-нибудь подскажет мне?DIV встроенный блок не выравнивается по горизонтали

CSS

.col1 
{ 
    display:inline-block; 
    vertical-align:top; 
    width:225px; 
} 

.col2 
{ 
    display:inline-block; 
    vertical-align:top; 
    width:225px; 
} 

.col3 
{ 
    display:inline-block; 
    vertical-align:top; 
    width:225px; 
} 

.col4 
{ 
    display:inline-block; 
    vertical-align:top; 
    width:225px; 
} 

.col5 
{ 
    display:inline-block; 
    vertical-align:top; 
    width:225px; 
} 

.col_content_wrap 
{ 
    background-color:#fff; 
    border:1px solid #ddd; 
    border-radius:5px 5px 5px 5px; 
    box-shadow:4px 4px 1px #eee; 
    margin-bottom:10px; 
} 

.imgwrap 
{ 
    height:169px; 
    position:relative; 
    width:223px; 
} 

.price_wrap 
{ 
    border-top:1px solid silver; 
    height:50px; 
} 

.price 
{ 
    float:right; 
    margin:10px; 
}

HTML

<div clas="col1"> 
    <div class="col_content_wrap> 
    <div class="imgwrap">image here 
    <div class="price_wrap"><div class="price"> 
    </div> 
    </div> 
    </div> 
    </div> 



<div clas="col2"> 
    <div class="col_content_wrap> 
    <div class="imgwrap">image here 
    <div class="price_wrap"><div class="price"> 
    </div> 
    </div> 
    </div> 
    </div> 


<div clas="col3"> 
    <div class="col_content_wrap> 
    <div class="imgwrap">image here 
    <div class="price_wrap"><div class="price"> 
    </div> 
    </div> 
    </div> 
    </div> 


    <div clas="col4"> 
    <div class="col_content_wrap> 
    <div class="imgwrap">image here 
    <div class="price_wrap"><div class="price"> 
    </div> 
    </div> 
    </div> 
    </div> 



    <div clas="col5"> 
    <div class="col_content_wrap> 
    <div class="imgwrap">image here 
    <div class="price_wrap"><div class="price"> 
    </div> 
    </div> 
    </div> 
    </div>

источник

2013-08-23 amdvb

JSFiddle будет полезно здесь. –

set overflow: hidden или post jsfiddle – Rooster

используйте запятую для тех же селекторов css: .col1, .col2, .col3, .col4, .col5 {...} ' – hallaji

Вы пропускаете endquote для каждого из <div class="col_content_wrap> элементов.

Кроме того, в каждой из ваших HTML блоков, у вас есть 5 <div> 'S и только 4 </div>' s

источник

2013-08-23 22:15:32 tomaroo

Кроме того,' div clas = "col1" 'должен быть div' class = "col1" '(' class' с ошибкой) – alexsh

Я делал ошибки при наборе текста, поскольку я не копировал оригинальный код, потому что у него много PHP-кода внутри каждого столбца. – amdvb

DIV встроенный блок не выравнивается по горизонтали

ответ

Смежные вопросы