0

有人可以帮我解决这个链接下指定的复杂的瓷砖布局吗？

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

不仅有 2 列。如果仪表板有 3rd、4th 等的可用宽度空间……那么它应该在那里。可能有一个到无限数量的不同大小的小部件。如果没有可用宽度空间，则新小部件应向下浮动到左侧并完全填满可用空间。

失败的标记：

<!DOCTYPE html>
<html>
  <head>
    <title>Dashboard</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="Robots" content="noindex, nofollow"/>
    <style type="text/css">
      #dashboard {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        background: #000;
        width: 320px;
        float: left;
      }
      div.widget {
        margin: 10px;
        border: 1px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        padding: 5px 10px 10px 10px;
        float: left;
      }
    </style>
  </head>
  <body>
    <div id="dashboard">
      <div class="widget" style="background: #fff; width: 120px; height: 150px">
        <h3>#1</h3>
      </div>
      <div class="widget" style="background: #fff; width: 120px; height: 250px">
        <h3>#2</h3>
      </div>
      <div class="widget" style="background: red; width: 90px; height: 50px">
        <h3>#3</h3>
      </div>
      <div class="widget" style="background: green; width: 90px; height: 50px">
        <h3>#4</h3>
      </div>
      <div class="widget" style="background: blue; width: 90px; height: 50px">
        <h3>#5</h3>
      </div>
    </div>
  </body>
</body>

附加模型：img191.imageshack.us/img191/2139/picture2fdi.png

4

6 回答 6

2

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

同位素.metafizzy.co

我希望这有帮助。

于 2011-05-04T11:24:45.717 回答
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>
于 2009-08-25T06:35:03.913 回答
2

制作 2 个容器 div，均浮动：左

然后只是浮动：将所有内容留在这些div中。

使用 CSS 进行两列布局的最简单方法。

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

CSS：

leftcol,rightcol{float:left;width:(whatever);}
于 2009-08-25T06:10:17.237 回答
0

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

于 2009-08-25T07:21:57.233 回答
0

您是否尝试过仅包含一个包装器 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;}
于 2009-08-25T07:23:10.210 回答
0

没有你想要的 CSS 解决方案。我想我已经看到 JS 解决方案四处飘荡，但我现在不能指望任何一个。

于 2009-08-26T09:17:08.220 回答