Question

以下是HTML页面的代码：

<!DOCTYPE html>
<html>

    <head>        
        <style type="text/css">
            div.image {
                float: left;   
            }
        </style>
    </head>

    <body>

        <div id="image-gallery">
            <div class="image">
                <h3>Stack Overflow</h3>
                <img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png?v=41f6e13ade69" />
            </div>
            <div class="image">
                <h3>Meta Stack Overflow</h3>
                <img src="http://cdn.sstatic.net/stackoverflowmeta/img/apple-touch-icon.png?v=d65f9368620d" />
            </div>
        </div>

        <h1>Title</h1>

    </body>
</html>

以下是页面的内容：

enter image description here

我想要的是页面看起来像这样：

enter image description here

问题是#image-gallery下方的代码与图片库旁边的对齐，因为内部的div正在使用属性float: left。正如您在图像中看到的那样，Title不是我想要的地方。

我正在使用float: left属性，以便所有图像彼此相邻。但我不能使用padding强制Title进入正确的位置，因为页面的宽度会发生变化，这意味着图像可能会堆叠在一行以上。

如何将Title放在#image-gallery
之下

Answer 1

你应该用以下方法清除浮动：

#image-gallery {
    overflow: auto;
}

或者，使用micro clearfix hack。

#image-gallery:after {
    content: "";
    display: table;
    clear: both;
}

Answer 2

使用display：inline-block;代替浮动，以及div或display：block;标题。

有页面部分开始UNDERNEATH浮动行：左div

2 个答案: