Question

这是我的网站：

http://mihalko.eu/download/

为什么第二行中的目录向右浮动，而不向左浮动（左侧是空白的 - 仅在第二行）？

我使用firebug添加了更多下载，一切都很好，除了第二行。

Picture http://d.pr/a8VQ

Answer 1

因为第一个框的高度为103px，而第二个框的高度为102px，因此下一个浮动框的高度最低。使第一张图像102px解决您的问题

Answer 2

在每两个条目之后

添加

，hr应该清除：both，width 100％

您还可以将每两个条目打包到单独的div

Answer 3

根据我的经验，你想拥有一个“clear：both”的类，以便正确显示。 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;
}

找不到我网站上的错误

5 个答案: