Question

我正在将博客JSON api中的博客文章放入我的页面。帖子是HTML格式的。有些帖子载有内容;例如，一个图像向左浮动，文本向右，比图像短。它下面的帖子的标题和日期也被推到右边。我记得在CSS中有一种深奥的方式来隔离div中的float。我无法记住。而且我不记得它甚至叫什么。我整天都在搜索。有什么想法吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Sandy Reads - News</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <style></style>
</head>
<body>
    <div class="container-fluid">
        <section id="posts">
            <div class="page-header">
                <h1>Sandy Reads <small>News</small></h1>
            </div>
        </section>
    </div>

    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment-with-locales.min.js"></script>
    <script>
        $(function () {
            var key = "Redacted";
            var blogId = "Redacted";
            var resource = "https://www.googleapis.com/blogger/v3/blogs/" + blogId + "/posts?maxResults=10&key=" + key;

            $.getJSON(resource, function (data) {
                var items = [];
                $.each(data.items, function (key, val) {
                    var kind = val.kind;
                    if (kind !== 'blogger#post')
                        return;

                    var blogId = val.id;
                    var title = val.title;
                    var content = val.content;
                    var date = moment(val.updated);

                    items.push("<li id='" + blogId + "' class='post'>" +
                        "<a href='blog.html?id=" + blogId + "'><h3>" + title + "</h3></a>" +
                        "<i>" + date.format('MMMM Do YYYY') + "</i></div>" +
                        "<div>" + content + "</div>" + 
                        "</li>");
                });

                $("<ul/>", {
                    "class": "list-group my-new-list",
                    html: items.join("")
                }).appendTo("#posts");
            });
        });
    </script>
</body>
</html>

Answer 1

你可能会想到overflow: hidden，但是你应用它的元素取决于你的标记是什么样的。我可以告诉你将它应用到浮动的父级，但是如果被推到的内容出现在同一个父级中，那么那将无济于事。

好的，所以你的脚本会在一系列li.post元素中生成帖子。内容显示在标题和日期后面的div中。您可以设置li.post以清除浮动广告，也可以将overflow: hidden应用于div。（在您可能想要考虑的发布日期之后有一个虚假的</div>结束标记。）

如何隔离浮动内容？

1 个答案: