Html 如何设置页边距上下自动？

我已经创建了一个报价框，我在一页上显示了12个报价框（每行3个），但由于报价可能很小或很长，我希望保持从顶部和左侧固定的边距

现场示例在这里>>，引文在这里和那里显示

下面是我正在使用的css：

    .blockquote {
        width: 300px;
        overflow: hidden;
        position: relative;
        background: #ffffff;
        font - family: Georgia,
        serif;
        font - size: 18px;
        font - style: italic;
        margin: 0.25em 0;
        padding: 0.25em 40px;
        line - height: 1.45;
        color: #100202;
        border-radius: 1px 47px 0px 47px;
        -moz-border-radius: 1px 47px 0px 47px;
        -webkit-border-radius: 1px 47px 0px 47px;
        border: 2px solid # 4f4f4f;
    }
    .blockquote p {
            color: #000000;
    }
    .blockquote:before {
        display: block;
        content: "\201C";
        font-size: 80px;
        position: absolute;
        left: -8px;
        top: -20px;
        color: # 00A0DA;
    } 
.wallpaper-box{float:left; margin:0px 15px 30px 15px; width:300px;}

HTML

<div class="wallpaper-box"> 
    <div class="blockquote"> 
        <a href="<?php the_permalink();?>"> <?php the_excerpt(); ?> </a>
            <div class="fb-like-box">
                <div class="fb-like" data-href="<?php the_permalink();?>" data-width="280" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true">
                 </div> 
            </div>
    </div>
</div>

我知道这不能用CSS回答你的问题，但是这个JS库非常适合你

如果您想在纯css中实现这一点，请看一下这把小提琴：

它利用

column-count: 3;
column-gap: 3%;
column-width: 30%;

为了实现这种布局。但是，在较旧的浏览器上不支持此功能（对于较旧的浏览器，您可能希望回退到其他浏览器上）

为您的代码实现（以3列为例）：

根据您的页面外观，我的建议是使用它，因为它非常整洁，并且完全符合您的要求（我假设引用在宽度和高度方面是动态的）


或者默认的CSS方式是使用
Kristofeys
或者这个建议（尽管他的方法在假设列计数有限的情况下更干净）

HTML

<div class="quote">
   <div class="one" style="border:1px solid #000">one</div>
   <div class="three" style="border:1px solid #000"> three three three</div>
<div class="five" style="border:1px solid #000">five five five five five   five five five five five   five five five five five   five five five five five   five five five five five   </div>
   <div class="seven" style="border:1px solid #000">seven seven seven seven seven seven seven </div>
</div>
<div class="quote">
   <div class="two" style="border:1px solid #000">two two</div>
   <div class="four" style="border:1px solid #000">four four four four </div>
   <div class="six" style="border:1px solid #000">six six six six six six </div>
   <div class="eight" style="border:1px solid #000">eight eight eight eight eight eight eight eight </div>
</div>

有什么理由反对投票吗？我不是唯一推荐Mansonry插件的人，它是一个很棒的工具！
<div class="quote">
   <div class="one" style="border:1px solid #000">one</div>
   <div class="three" style="border:1px solid #000"> three three three</div>
<div class="five" style="border:1px solid #000">five five five five five   five five five five five   five five five five five   five five five five five   five five five five five   </div>
   <div class="seven" style="border:1px solid #000">seven seven seven seven seven seven seven </div>
</div>
<div class="quote">
   <div class="two" style="border:1px solid #000">two two</div>
   <div class="four" style="border:1px solid #000">four four four four </div>
   <div class="six" style="border:1px solid #000">six six six six six six </div>
   <div class="eight" style="border:1px solid #000">eight eight eight eight eight eight eight eight </div>
</div>

.quote {
    float: left;
    width: 300px;
}