Question

我创建了一个报价框，我在一个页面上显示12个引用框（每行3个），但由于报价可能很小或很长，我想保持上下左边的保证金。

现场示例在这里＆gt;＆gt; http://fun2ush.com/quotations-by/abraham-lincon/，报价在这里和那里显示。

以下是我正在使用的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>

Answer 1

我知道这不能用CSS回答你的问题，但这个JS库对于你正在寻找的东西来说是惊人的。

http://masonry.desandro.com/

Answer 2

如果你想在纯粹的CSS中实现这一点，请看看这个小提琴：http://jsfiddle.net/gabrieleromanato/tQANc/

它利用

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

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

为您的代码实现（带有3列示例）：

.wallpaper-box{
    column-count: 3;
    column-gap: 20px;
    column-width: 200px;
    min-width: 660px; /* add margins and paddings to calculate width */
}

Answer 3

从您的页面看起来，我的建议是使用Masonry Plugin作为它非常整洁并且完全符合您的要求（我假设引号在宽度和高度方面是动态的）

或默认的CSS方式是使用KristofFeys或此 Fiddle 建议的方式（尽管他的方法在列数有限的假设下更干净）

<强> 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>

<强> CSS

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

如何设置margin-top和left auto？

3 个答案: