找不到我的网站上的错误

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; 
}