Div對齊響應

我有以下HTML結構。這只是一堆視圖 - 排列在彼此之下的div。我想的div並排每2.Div對齊響應

放置所以以下圖案

視圖排-1觀點行2個視圖-行3次排4 視圖-行5次-ROW 6

<div class="view view-toepassingen view-id-toepassingen view-display-id-page view-dom-id-5a6ac8323a7566e5f11218e7b6c49c5c"> 
    <div class="view-content"> 
    <div class="views-row views-row-1 views-row-odd views-row-first"> 
     <div class="views-field views-field-title"> 
     <div class="views-field views-field-body"> 
     <div class="views-field views-field-field-afbeeldingen"> 
    </div> 
    <div class="views-row views-row-2 views-row-even"> 
    <div class="views-row views-row-3 views-row-odd"> 
    <div class="views-row views-row-4 views-row-even"> 
    <div class="views-row views-row-5 views-row-odd"> 
    <div class="views-row views-row-6 views-row-even views-row-last"> 
</div>

到目前爲止，CSS，我有：

#zone-content .views-row{ 
    padding: 20px 0 20px 0; 
    width: 440px; 
} 
#zone-content .views-row img{ 
    max-width: 360px; 
    max-height: 400px; 
} 

#zone-content .views-field-title { 
    width: 400px; 
    height:50px; 
} 

#zone-content .views-field-body { 
    margin-top:70px; 
    height: 290px; 
    width: 400px; 
}

來源

2013-06-27 skrln

這篇文章並沒有完全採用我的格式，我打算把2個div放在一起，然後開始新的一行。建議：display：inline-block on views-row做了這個竅門，因爲1 div的寬度是容器寬度的一半。 – skrln

您可以將屬性display:inline-block添加到您的CSS類#zone-content .views-row看看。

來源

2013-06-27 05:46:22 mohkhan

這是你想要的嗎？我添加div之間出現了一點餘量看到它更清晰：Try if yourself

.views-row { 
    border: 1px solid; 
    float: left; 
    margin: 5px; 
}

來源

2013-06-27 05:46:15 maqjav

回答

相關問題