Question

问题： Div newline is hovering div gallery-preview

我试图让画廊预览，并且已经用桌子制作了div。 gallery-preview div是内联的，与其他人排成一行。如何让换行 div位于 gallery-preview divs行的底部？为什么换行悬停图库预览？

我的HTML：

        <div class="content">
        <h1 class="title">New Photosets</h1>
        <div class="gallery-preview">
            <table>
                <tr>
                    <td>
                        <img src="image.png" class="gallery-preview-big-image" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="image.png" class="gallery-preview-small-image" />
                        <img src="image.png" class="gallery-preview-small-image" />
                        <img src="image.png" class="gallery-preview-small-image" />
                    </td>
                </tr>
            </table>
        </div>
        <div class="newline"></div>

我的CSS：

.newline{
    width: 300px;
    height: 300px;
    border: 1px solid black;
}
/* --------------- */
/* Content Gallery */

.gallery-preview{
    padding-right: 1%;
    display: inline;
    float: left;
}
.gallery-preview-big-image{
    width: 166px;
    height: 166px;
    padding-bottom: 10px;
}
.gallery-preview-small-image{
    width: 50px;
    height: 50px;
    padding-right: 4px;
    display: inline;
}

/* --------- */

Answer 1

可能是因为float属性。

尝试将clear:both;添加到.newline样式中。

Answer 2

If this is what you want

您只需从.gallery-preview

中删除float:left

div正在徘徊其他div

2 个答案: