文章/答案/技术大牛

发布

社区首页 >问答首页 >让页面部分在浮动行下开始:左div

问让页面部分在浮动行下开始:左div
EN

Stack Overflow用户

提问于 2015-05-28 01:19:01

回答 2查看 31关注 0票数 0

下面是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>

下面是这一页的样子：

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

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

我使用的是float: left属性，所以所有的图像都在彼此的旁边。但是，我不能使用padding强制将Title放到适当的位置，因为页面的宽度会发生变化，这意味着图像可能堆放在超过1行。

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

css

image

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-05-28 01:22:18

您应该清除浮标，要么使用：

#image-gallery {
    overflow: auto;
}

或者，使用微清除黑客。

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

票数 2

Stack Overflow用户

发布于 2015-05-28 01:24:03

使用显示:内联块；而不是浮动，和div或显示:块；作为标题。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/30495669

复制

相似问题

问让页面部分在浮动行下开始:左div
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让页面部分在浮动行下开始:左divEN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问让页面部分在浮动行下开始:左div
EN