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

Question

我试图从Tumblr API设置生成的Feed的样式。我的测试页面在这里：

http://www.nevermorestudiosonline.com/youtubetest

随意忽略该网址。当我开始使用Tumblr进行测试时，我做了一件YouTube事情并且没有更改文件名。 我无法弄清楚我的div的背景颜色出了什么问题。我想要＆＃34;发布者＆＃34;部分向下填充，帖子内容背景填写到右边。 （颜色暂时只是占位符。我打算在我的头版上实际显示内容时进行调整。）

这是我用来拉取帖子的脚本，然后在各种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

就柱体而言，只要你浮动：离开div，它就会停止占据宽度的100％并且只会与内容一样宽。您需要移除柱体上的浮子。您会注意到，当它这样做时，它会扩展到整个页面的宽度。您需要将所有帖子放在容器div中以阻止这种情况发生。

就完全高度而言，你可以做几件事，但我会概述我的最爱。

首先我们为博客帖子和postion设置一个min-height：relative（我会解释）

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

然后我们需要将发布者定位为绝对。这是IMO最好的方式，使其成为岗位高度的100％。我们把博客文章定位为相对位置，以便发布者的绝对定位相对于博客帖子。

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

然后你需要让你的帖子身体有一个余量来补偿截面发布的绝对位置。

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

这些东西应该让它看起来都很好！

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

请告知：）