Question

我无法用语言表达。举个例子，这就是我想要完成的事情：

http://appono.tumblr.com

现在，用语言：我希望有一个四列布局，div的高度不同。在上面的示例中，div都具有相同的宽度，但它们的高度不同，div可以毫无问题地填充间隙。但是，我尝试使用左侧的简单浮动来完成此操作并失败：

HTML（随机草率示例）

<div class="wrapper">
    <div class="content">
        <div class="smexy">
            <h3>ASD SADA N SAD AD AS D ASD A SD ADWW AD W AD AS Ds D WD D AWD W D WAD AW AD WA D SADAS F AFW A F WAF AS F</h3>
        </div>
        <div class="smexy">
            <h3>Why Hello</h3>
        </div>
        <div class="smexy">
            <h3>LOREM IPSUM DOLOR I AM TYPIING THIS FROM MEMORY OKAY THANKS GOODBYE HAVE A NICE DAY</h3>
        </div>
        <div class="smexy">
            <p>Lolwut</p>
        </div>
        <div class="smexy">
            <h3>Yo WHY HELLO DAR</h3>
        </div>
    </div>
</div>

CSS

.smexy {
    float:left;
    position:relative;
    width:25%;
    background:#d2d2d2;
    margin:5px;
    padding:0;
}

我如何实现我的目标？

Answer 1

AFAIK，你不能只做CSS，你需要javascript。

似乎为你做的好的图书馆是Masonry。

在您的情况下，请使用类似

的内容

var container = document.querySelector('.wrapper');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.smexy'
});

Demo

请参阅list of options以获得所需的行为。

Answer 2

如果您正在寻找您刚刚分享的网站效果，请使用他们使用的插件。 :) 你想要完成的东西不能用直接的CSS来完成。浮动不会以这种方式工作 - 除非您创建3个.content列并在列中加载.smexy个DIV。想想更垂直与横向。你挖？：）

这是插件：

http://masonry.desandro.com/

然后看看这种性感（涂秽？）： http://tympanus.net/Development/GridLoadingEffects/index2.html

四列布局CSS的麻烦

2 个答案: