Question

您好，感谢您阅读本文。

我使用主要引导程序和一些自定义css进行设置

链接到Image

正如你所看到的那样，一些帖子之间有一个巨大的空间，我想知道我怎么能推动＆＃34;每个博客的容器都很好看

这样的东西

的CSS

.blog-post-holder .well {
background-color: #ffffff;
text-align: center
}

.blog-post-holder .well img {
    width: 90%;
}

.blog-post-holder .well hr {
    border: 1px solid #dbdbdb
}

HTML

<div class="blog-post-holder">
            <div class="col-lg-3">
                <div class="well">dwadwada<br />wdewad</div>
            </div>
            <div class="col-lg-3">
                <div class="well">
                    <img src="http://www.verticalresponse.com/blog/wp-content/uploads/2013/02/blogimg1-620x350.jpg" />
                    <hr />
                    dwadwada<br />wdewad
                </div>
            </div>
            <div class="col-lg-3">
                <div class="well">dwadwada<br />wdewad</div>
            </div>
            <div class="col-lg-3">
                <div class="well">
                    <img src="http://www.verticalresponse.com/blog/wp-content/uploads/2013/02/blogimg1-620x350.jpg" />
                    <hr />
                    dwadwada<br />wdewad
                </div>
            </div>
            <div class="col-lg-3">
                <div class="well">
                    <img src="http://www.verticalresponse.com/blog/wp-content/uploads/2013/02/blogimg1-620x350.jpg" />
                    <hr />
                    dwadwada<br />wdewad
                </div>
            </div>
            <div class="col-lg-3">
                <div class="well">dwadwada<br />wdewad</div>
            </div>
            <div class="col-lg-3">
                <div class="well">dwadwada<br />wdewad</div>
            </div>
            <div class="col-lg-3">
                <div class="well">
                    <img src="http://www.verticalresponse.com/blog/wp-content/uploads/2013/02/blogimg1-620x350.jpg" />
                    <hr />
                    dwadwada<br />wdewad
                </div>
            </div>
        </div>

我已经尝试了几个小时了，我有点失去了我怎么做到这一点。我会接受任何帮助：jquery，plugins，css或其他任何东西。

感谢您的时间和帮助。

Answer 1

尝试使用gridalicious来实现此布局

http://suprb.com/apps/gridalicious/

Answer 2

您必须使用一些可用的JQuery插件，例如：wookmark，Blocklist.。使用该插件，您可以轻松地安排您想要的内容。

masonry是另一个实现这一目标的人。

Answer 3

您可以为内部div应用内联显示样式，但这不是一个合适的解决方案。如果您严格限制使用css，请尝试：

.blog-post-holder > div {
  display: inline;
}

否则使用上面建议的jQuery插件。我更喜欢masonry因为它更容易使用。

将bootstrap div对齐在彼此之下

3 个答案: