找不到我的網站上的錯誤

Question

這裏是我的地盤：

http://mihalko.eu/download/

爲什麼是第2行浮動到右邊的目錄，而不是左側（左側爲空白 - 只在第二排）？

我添加了一些更多的下載與螢火蟲，一切都很好，除了第二行。

Picture http://d.pr/a8VQ

Answer 1

，因爲第一盒有103px的高度，而第二一個有102px的高度，因此接下來的浮動排在最低的高度。使第一圖像102px解決您的問題

Answer 2

每兩個條目後添加

---

，HR應該有明確的：既，寬度100％

你也可以把每兩個條目分開DIV

Answer 3

以我的經驗你想擁有一個「清除：兩者」的類，以便正確顯示。 W3Schools

`

.clearboth { 
    clear: both; 
    width: 100%; 
} 

<div class="download-box"> 
    <div class="download-box-image"> 
     <a href="http://mihalko.eu/downloads/slovkolex_katalog_2011.pdf" title="Slovkolex katalóg"><img alt="Slovkolex" src="http://mihalko.eu/image/data/download/slovkolex.jpg" width="140"></a></div> 
    <div class="download-box-text"> 
     <div class="nazov"> 
      Katalóg Slovkolex</div> 
     <div class="typ"> 
      *.pdf</div> 
     26 236 kB</div> 
</div> 
<div class="download-box"> 
    <div class="download-box-image"> 
     <a href="http://mihalko.eu/downloads/DEMA_dealerbook_2012.pdf" title="Dema 2012"><img alt="Dema 2012" src="http://mihalko.eu/image/data/download/Dema 2012.jpg" width="140" style="opacity: 1; "></a></div> 
    <div class="download-box-text"> 
     <div class="nazov"> 
      Katalóg Dema 2012</div> 
     <div class="typ"> 
      *.pdf</div> 
     32 116 kB</div> 
</div> 

<!-- HERES THE CHANGE --> 
<div class="clearboth"></div> 

<div class="download-box"> 
    <div class="download-box-image"> 
     <a href="http://mihalko.eu/do`enter code here`wnloads/slovkolex_katalog_2011.pdf" title="Slovkolex katalóg"><img alt="Slovkolex" src="http://mihalko.eu/image/data/download/slovkolex.jpg" width="140"></a></div> 
    <div class="download-box-text"> 
     <div class="nazov"> 
      Katalóg Slovkolex</div> 
     <div class="typ"> 
      *.pdf</div> 
     26 236 kB</div> 
</div> 

`

Answer 4

@thenetimp是正確的。改變第一個塊的高度爲102.

style="height: 102px;" 

應該解決這個問題。

注：這是設計，浮動將採取下一個可用最高它可以適應自己的地方。一個像素是一個差異，因此它適合自己高一點。

Answer 5

.download-box { 
    float: left; 
    margin: 20px 15px 20px 0; 
    padding: 0; 
    width: 295px; 
    height: 104px; 
}