Question

我有一个令人费解的任务......对我来说。这是我想要实现的jsFiddle example。

小提琴中的代码：

HTML

<div id="container">
<div class="smallsq">Small Square</div>
<div class="bigsq">Big Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="vertsq">Vert Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
<div class="smallsq">Small Square</div>
</div>

CSS：

#container {
width:500px;
height: 500px;
background: #ccc;
display: block;
}
.bigsq {
width: 20%;
height: 20%;
background: red;
float: left;
display: block;
}
.smallsq {
width: 10%;
height: 10%;
background: green;
float: left;
display: block;
}
.vertsq {
width: 10%;
height: 20%;
background: blue;
display:block;
float: left;
}

简而言之：

我有3平方码。我真的需要用小盒子包围Big Box和Vert Box，但是注意无论它的位置是什么（例如，大型之前的两个小型，或大型小型大型，或四个小型 - 小的，等等）。不仅仅是Big＆amp;的权利。 Vert盒子和左边的盒子也应该有一个小盒子，所以在我的例子中不会有空行......请注意我也不想使用例如。 “小持有人”拿着我的小盒子，就像我最近读过这个问题的唯一解决办法一样。我使用jquery或js或你建议达到目标的所有内容都没有问题：）

P.S：想要的结果图像： enter image description here

Answer 1

The Masonry Layout ？

我的回答来自搜索，您要实现的目标 explained here 非常好。

正如预期的那样，实现这一目标超出了CSS的功能（尽管boxflex可能会让我们/靠近只有CSS的解决方案）

从那篇文章中可以找到许多javascript库的链接。

对我来说没有任何好处，因为这些信息来自搜索 - 希望它通过研究文章和javascript库来了解正在发生的事情并找到最适合您工作的实现。

Answer 2

这是一个可能的css解决方案。基本上我正在制作大盒子盖住小盒子，并使它们布局中立。

.bigsq {
    width: 20%;
    height: 20%;
    background: red;
    float: left;
    display: block;
    margin-bottom: -20%;
    margin-right: -20%;
    z-index: 1;
    position: relative;
}

http://jsfiddle.net/sabof/6H5ex/

Answer 3

使用jQuery Nested可能的解决方案。以下是您的代码的样子：

<强> HTML

<div id="container">
  <div class="box size11"></div>
  <div class="box size12"></div>
  <div class="box size21"></div>
  <div class="box size22"></div>
  ...
</div>

<强> JS

$("#container").nested({selector: '.box'});

Answer 4

不确定你的意思，但试试这个

#big {
    float:left;
    width:100px;
    height:100px;
    background-color:gray;
    border-top-left-radius:10px;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
}

#small {
    float:left;
    width:50px;
    height:50px;
    background-color:gray;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
}

周围更大的div与较小的div？

4 个答案: