Question

有人可以帮助我在the link下指定复杂的瓷砖布局。

我曾尝试使用float：left用于小部件，但我的红色块总是低于＃2。我应该能够将小部件动态添加到黑色仪表板。我可以使用html5，css3和jquery。

不只有2列。如果仪表板有3号，4号等的自由宽度空间......那么它应该在那里。可以是一个到无数个不同大小的小部件。如果没有自由宽度空间，则新窗口小部件应向左浮动并完全填充空闲空间。

标记失败：pastie.org/593815

其他模型：img191.imageshack.us/img191/2139/picture2fdi.png

Answer 1

制作2个容器div，均为float：left

然后只是浮动：把所有div中的所有东西都留下来。

使用css进行双列布局的最简单方法。

<div id="leftcol">
your code...
</div>
<div id="rightcol">
your code...
</div>

的CSS：

leftcol,rightcol{float:left;width:(whatever);}

Answer 2

CSS：

body {
  background: #000;
}
.left {
    float: left;
}
.right {
    float: left;
}
.widget {
    margin: 10px;
    margin-right: auto;
    margin-left: auto;
    width: 200px;
}
.content {
    margin: 10px;
    background: #fff;
    width: 300px;
}
#one {
    height: 300px;
}
#two {
    height: 400px;
}
#red {
    background: #f00;
    height: 100px;
}
#green {
    background: #0f0;
    height: 100px;
}
#blue {
    background: #00f;
    height: 100px;
}

HTML：

<div class="left">
    <div class="content" id="one"></div>
    <div class="widget" id="red"></div>
    <div class="widget" id="green"></div>
</div>

<div class="right">
    <div class="content" id="two"></div>
    <div class="widget" id="blue"></div>
</div>

Answer 3

我知道这可能为时已晚。但我最近发现这个JQuery插件似乎以一种非常优雅的方式解决了这个问题。

isotope.metafizzy.co

我希望这会有所帮助。

Answer 4

使用BlueprintCSS怎么样？ http://www.blueprintcss.org/

Answer 5

您是否尝试过只包含一个包装器div，将其归类为“小部件”并将其浮动？我不确定我理解＃1和＃2下面的彩色盒子是什么，但是如果它们与它们正上方的物品有关，我不明白这是多么困难：

<div class="widget">
    <div id="widget1">stuff</div>
    <div id="widget1_1">stuff related to 1</div>
</div>

<div class="widget">
    <div id="widget2">stuff</div>
    <div id="widget2_1">stuff related to 2</div>
</div>

CSS：

.widget {float: left; overflow: auto;}
.widget div {float: left;}

Answer 6

没有你想要的CSS解决方案。我想我已经看到JS解决方案浮出水面，但我现在无法指责任何问题。

复杂的CSS布局

6 个答案: