10

问题很简单。我有一堆要制作瓷砖的元素。但是，其中一些具有更长的高度；让我们说是其他人的两倍。我希望它们都通过纯 CSS 样式匹配在一个 tile 中。

这是我所拥有的：

在此处输入图像描述

这就是我想要的：

在此处输入图像描述

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
    box-shadow: 0 0 1px black inset;
    width: 100px;
    display: inline-block;
}
#d1,
#d2,
#d4,
#d5,
#d6,
#d8,
#d9{
    height: 100px;
    background-color: yellow;
}
#d7,
#d3{
    height: 200px;
    background-color: red;
}
</style>
</head>
<body>
<div id="d1">1</div><div id="d2">2</div><div id="d3">3</div><div id="d4">4</div><div id="d5">5</div><div id="d6">6</div><div id="d7">7</div><div id="d8">8</div><div id="d9">9</div>
</body>
</html>

您可以在 JSBin 上实时试用：http: //jsbin.com/usovek/1/edit

笔记：

  • 内容是动态的
  • 盒子的数量可以变化
  • 任何盒子都可以更长。并且可能更广泛。
  • 框的宽度或高度始终是多个单位。这个例子中的单位是 50，有些盒子是 50，有些是 100px 高。但是，如果问题能解决任意数量的单位（1、2、3 ......它们是 50px、100px、150px、......），那将是完美的
4

1 回答 1

8

如果您的内容是静态的，则可以在相对定位的容器内使用绝对位置块，但如果内容是动态的，则无法使用 CSS（仅）执行此操作，您需要使用的是

jQuery砌体

或者你能做的最好的就是这个

CSS

#d7,
#d3{
    height: 200px;
    background-color: red;
    float: left;
}

第三种可能性：将盒子包裹在容器中并相应地浮动

演示（仅当事情是静态的时候才有可能）:)

于 2013-03-10T08:01:43.787 回答