jquery - 用背景颜色填充空白区域？

Question

我正在尝试为从 Tumblr API 生成的提要设置样式。我的测试页面在这里:

http://www.nevermorestudiosonline.com/youtubetest

请随意忽略该 URL。当我开始使用 Tumblr 进行测试时，我做了一个 YouTube 的事情并且没有费心去改变文件名。 我无法弄清楚我的 div 的背景颜色做错了什么。我希望“发布者”部分向下填充，帖子内容背景向右填充。 (颜色暂时只是占位符。我计划在我的首页上实际显示内容时进行调整。)

这是我运行的脚本，用于拉取我的帖子，然后在各种 div 中创建它们。

jQuery.ajax({url: "http://api.tumblr.com/v2/blog/nevermorestudiosonline.tumblr.com/posts?api_key={api_key}&limit=5&jsonp=log_me", dataType: "jsonp"});

    function log_me(data){
        console.log(data); //So I can keep an eye on how things are coming in. Will be removed in live version.

        for(i=0; (i < data.response.total_posts) && (i < 5); i++){

            if (data.response.posts[i].type == "text"){
                if (data.response.posts[i].hasOwnProperty('body_abstract')){
                    $('<div class="blogpost"></div>').append(
                        '<div class="blogtitle"><h2>' + data.response.posts[i].title + '</h2></div>' + 
                        '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
                        '<div class="postbody">' + data.response.posts[i].body_abstract + '<p>Read More...</p></div>'
                    ).appendTo('#blogblock');
                }
                else {
                    $('<div class="blogpost"></div>').append(
                        '<div class="blogtitle"><h2>' + data.response.posts[i].title + '</h2></div>' + 
                        '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
                        '<div class="postbody">' + data.response.posts[i].body + '</div>'
                    ).appendTo('#blogblock');
                };
            }
            else if (data.response.posts[i].type == "photo"){
                $('<div class="blogpost"></div>').append(
                    '<div class="blogtitle"><h2>Photos and Images</h2></div>' + 
                    '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
                    '<div class="postbody">' + data.response.posts[i].caption + '</div>'
                ).appendTo('#blogblock');
            }
            else if (data.response.posts[i].type == "quote"){
                $('<div class="blogpost"></div>').append(
                    '<div class="blogtitle"><h2>Words of Wisdom</h2></div>' + 
                    '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
                    '<div class="postbody"><p>&ldquo;' + data.response.posts[i].text + '&rdquo; --' + data.response.posts[i].source + '</p></div>'
                ).appendTo('#blogblock');
            }
            else if (data.response.posts[i].type == "link"){
                $('<div class="blogpost"></div>').append(
                    '<div class="blogtitle"><h2>Check this link out!</h2></div>' + 
                    '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
                    '<div class="postbody"><p>' + data.response.posts[i].url + '</p></div>'
                ).appendTo('#blogblock');
            }
            else if (data.response.posts[i].type == "chat"){
                $('<div class="blogpost"></div>').append(
                    '<div class="blogtitle"><h2>' + data.response.posts[i].title + '</h2></div>' + 
                    '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
                    '<div class="postbody"><p>' + data.response.posts[i].body + '</p></div>'
                ).appendTo('#blogblock');
            }
            else if (data.response.posts[i].type == "audio"){
                $('<div class="blogpost"></div>').append(
                    '<div class="blogtitle"><h2>Listen to this!</h2></div>' + 
                    '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
                    '<div class="postbody">' + data.response.posts[i].player + '<p>' + data.response.posts[i].caption + '</p></div>'
                ).appendTo('#blogblock');
            }
            else if (data.response.posts[i].type == "video"){
                $('<div class="blogpost"></div>').append(
                    '<div class="blogtitle"><h2>Watch this!</h2></div>' + 
                    '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
                    '<div class="postbody">' + data.response.posts[i].player[1].embed_code + '<p>' + data.response.posts[i].caption + '</p></div>'
                ).appendTo('#blogblock');
            }
            else {
                $('<div class="blogpost"></div>').append(
                    '<div class="blogtitle"><h2>This post type is broken!</h2></div>' + 
                    '<div class="postedby"><img class="avatar" src="http://api.tumblr.com/v2/blog/' + data.response.posts[i].post_author + '.tumblr.com/avatar" alt="Avatar" height="64" width="64" /><p>Posted By ' + data.response.posts[i].post_author + '</p></div>' + 
                    '<div class="postbody"><p>Please contact the webmaster to add support for displaying this post!</p></div>'
                ).appendTo('#blogblock');
            };

        };
    };

脚本运行良好。我计划在所有这些都以正确的方式工作后进行优化。这是我(目前)应用于帖子的 CSS:

    .blogpost {
    clear: both;
}

.blogtitle {
    background: -webkit-linear-gradient(left, #444444 , black); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, #444444 , black); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, #444444 , black); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, #444444 , black); /* Standard syntax */
    width: 968px;
    height: 40px;
}

.blogtitle h2 {
    padding: 5px;
}

.postedby {
    text-align: center;
    width: 100px;
    float: left;
    background: #888888;
}

.postedby p {
    margin-top: 5px;
}

.postedby img {
    margin-top: 5px;
}

.postbody {
    float: left;
    background: #bbbbbb;
    padding: 5px;

}

.postbody p{
    margin: 5px 0px 5px 0px;
}

我只是不确定在什么地方放什么颜色来填充空间。这就是我要寻找的全部内容，但我提供了脚本等，以防需要对每个帖子的结构进行调整。

Answer 1

就帖子正文而言，只要您 float :离开 div，它就会停止占用 100% 的宽度，而只会与内容一样宽。您需要移除柱体上的 float 。当您这样做时，您会注意到它会扩展到整个页面的宽度。您需要将所有帖子放入容器 div 中以阻止这种情况发生。

就占据整个高度的帖子而言，您可以做几件事，但我会概述我最喜欢的。

首先我们为博文和 postion:relative 设置一个最小高度(我会解释)

.blogpost {
  clear: both;
  position: relative;
  min-height: 165px;
}

然后我们需要将posted by定位为absolute。这是 IMO 使其成为帖子高度的 100% 的最佳方法。我们将博文设为相对位置，这样 posted by 的绝对定位就是相对于博文的。

.postedby {
  text-align: center;
  width: 100px;
  background: #888888;
  bottom: 0;
  top: 40px;
  position: absolute;
}

然后你需要让你的post body有一个边距来补偿post by section的绝对位置。

.postbody {
  background: #bbbbbb;
  padding: 5px;
  margin-left: 100px;
}

这些东西应该让一切看起来都不错!

编辑:如果您希望它看起来像这样，还有一些其他的编辑: http://i.imgur.com/c3JmkmM.png

请指教:)