Question

我正在努力制作div，我把我网站的内容作为回应：sgcafe.com

如果您检查并调整浏览器的大小，内容将完美地适合屏幕，根据浏览器的宽度使框大或小。

以下是我到目前为止的内容：http://jsfiddle.net/MarkTe/oyf3qwvb/

<div id="header"></div>
<div id="main">
    <div class="content">box 1</div>
    <div class="content">box 2</div>
    <div class="content">box 3</div>
    <div class="content">box 4</div>
</div>
<div id="footer"></div>

CSS:

#main {
    overflow:hidden;
    border: 1px solid orange;
}
.content{
    color: white;
    margin-left: 3%;
    margin-right: 3%;
    width: 200px;
    height: 250px;
    background: #2d2d2d;
    border: 1px solid #DDD;
    border-radius: 10px;
   float: left;

Answer 1

http://masonry.desandro.com/

使用此库。它完全符合您的要求。如果您希望它们具有相同的尺寸，只需保持div的宽度和高度，并且砌体将根据视口大小重新调整它们。有任何问题让我知道。

<强> -------------------------------------------- ----编辑---------------------------------------------

为了回答下面的问题，我创造了一个小提琴，以实现我的目标：

http://jsfiddle.net/z4fs7nht/1/

我补充说：

transitionDuration: 1,

将JavaScript调用到您的元素的JavaScript（我在那里发现了docs）并添加了：

*{
    -webkit-transition:all 1s ease;
         -moz-transition:all 1s ease;
               -o-transition:all 1s ease;
                     transition:all 1s ease;
}

在CSS文件中。当您更改浏览器/视口大小时，这些样式会为元素提供“反弹”类型。

你会注意到我的小提琴示例，我也使用媒体查询来改变浏览器更改时元素的宽度。更改宽度使我能够更自然地感受过渡效果，并且模拟我们从中获取灵感的网站。

/ *注* / 我已经注释掉了：

/*         background: blue; */

背景颜色样式。我有这些，所以当窗口达到那个尺寸时，它会改变背景颜色，这样我就可以很容易地看到变化。您可以删除它们，也可以在编辑网站时使用它们。

祝你好运！

Answer 2

我们现在有列宽，列间隙和列规则css属性。 IE9不支持它们，并且通过调整空白区域，您可以获得与sgcafe.com相同的结果。正如迷你约翰所说，Masonry javascript用于制作布局。试一试......

让身体像这样响应？

2 个答案: