CSS對齊問題在塊

點擊here和向下滾動到打印市場塊......那些4塊必須並排但是第四人會因爲某些原因...

下面是代碼，該塊區域

<div class="eleven columns bottom-4"> 
    <h3 class="title">Print Marketing</h3> 
<div class="five columns item element-2"> 
    <a href="#"> 
     <img src="images/img/sellers/slide1a.png" alt="" class="pic" /> 
    </a> 
</div> 
<!-- End --> 

<!-- item 2 --> 
<div class="five columns item element-2"> 
    <a href="#"> 
     <img src="images/img/sellers/slide1b.png" alt="" class="pic" /> 
    </a> 
</div> 
<!-- End --> 
<!-- item 3 --> 
<div class="five columns item element-2"> 
    <a href="#"> 
     <img src="images/img/sellers/slide1a.png" alt="" class="pic" /> 
    </a> 
</div> 
<!-- End --> 

<!-- item 4 --> 
<div class="five columns item element-2"> 
    <a href="#"> 
     <img src="images/img/sellers/slide1b.png" alt="" class="pic" /> 
    </a> 
</div> 
<!-- End --> 


    </div>

CSS是如下..

.container .columns { 
float: left; 
display: inline; 
margin-left: 10px; 
margin-right: 10px; 
} 
.container .five.columns { 
width: 280px; 
} 
.container .eleven.columns { 
width: 640px; 
}

我已經嘗試了它很多東西。即使給了他們一種內聯風格也不管用......對此有任何想法，因爲他們所有人都有適用於他們的同一類，但是其中一個塊與其他所有類相同。

讓我知道謝謝。

來源

2014-04-03 Omicans

請在此處添加有意義的代碼和問題描述。請不要將鏈接到需要修復的網站 - 否則，一旦問題得到解決，此問題將會丟失未來訪問者的任何價值。發佈 [簡短，獨立，正確的示例（SSCCE）]（http://www.sscce.org/），這表明您的問題將幫助您獲得更好的答案。有關更多信息，請參閱 [我的網站上的某些內容不起作用。我可以只粘貼一個鏈接到它嗎？]（http://meta.stackexchange.com/questions/125997/）謝謝！ – j08691

這是因爲你的第二張圖像與第一張圖像不一樣。 –

圖像的大小是真正的問題:) – Omicans

如果您嘗試將它們對齊到一個表格中，您可以隨時嘗試在表格中嵌套div。

來源

2014-04-03 21:04:15

在第三個div區塊，您需要添加clear:left;（內嵌或通過一個類）。

來源

2014-04-03 21:05:00 j08691

CSS對齊問題在塊

回答

相關問題