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將是有益的在這裏。 –

設置溢出：隱藏或張貼jsfiddle – Rooster

請使用逗號爲相同的CSS選擇器：'.col1，.col2，.col3，.col4，.col5 {...}' – hallaji

你缺少每個<div class="col_content_wrap>元素的endquote。

此外，在每個HTML塊，你有5 <div>的只有4 </div>的

來源

2013-08-23 22:15:32 tomaroo

此外，'div clas =「col1」 '應該是div'class =「col1」'（class'拼寫錯誤） – alexsh

我在輸入時犯了錯誤，因爲我沒有複製粘貼原始代碼，因爲它在每列中都有很多php代碼。 – amdvb

DIV內聯塊不水平對齊

回答

相關問題