Html 如何在平铺中浮动大小不同的元素_Html_Css_Layout_Css Float

Html 如何在平铺中浮动大小不同的元素

html css layout

Html 如何在平铺中浮动大小不同的元素,html,css,layout,css-float,Html,Css,Layout,Css Float,问题很简单。我有一堆元素将要制作一个瓷砖。然而，其中一些人的身高更长；让我们说两倍于其他的。我希望所有这些匹配在一个瓷砖只是纯粹的CSS样式以下是我所拥有的：这就是我想要的：这是我的密码： <!DOCTYPE html> <html> <head> <style type="text/css"> div { box-shadow: 0 0 1px black inset; width: 100px; display

问题很简单。我有一堆元素将要制作一个瓷砖。然而，其中一些人的身高更长；让我们说两倍于其他的。我希望所有这些匹配在一个瓷砖只是纯粹的CSS样式

以下是我所拥有的：

这就是我想要的：

这是我的密码：

<!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>


div{
盒影：0 0 1px黑色插图；
宽度：100px；
显示：内联块；
}
#d1，
#d2，
#d4，
#d5，
#d6，
#d8，
#d9{
高度：100px；
背景颜色：黄色；
}
#d7，
#d3{
高度：200px；
背景色：红色；
}
123456789

您可以在JSBin上现场试用：

注意事项：

内容是动态的
盒子的数量可能会有所不同
任何盒子都可以更长。而且可能更宽
长方体的宽度或高度始终为若干个单位。本例中的单位为50，有些盒子为50，有些盒子为100px高。但如果能解决任何数量的装置（1,2,3…分别为50px、100px、150px，…）的问题，这将是完美的

如果您的内容是静态的，您可以在相对定位的容器中使用位置绝对块，但如果内容是动态的，则您不能使用CSS（仅限于此），您需要使用的是

或者你能做的就是

CSS

第三种可能性：将包装盒包装在容器内，并相应地使容器浮起

（只有在静态情况下才可能）：

感谢您提供JQuery的链接。真是太棒了。但是，如果可能的话，我更喜欢使用纯CSS。我也喜欢你的CSS解决方案，即使它改变了元素的顺序。如果没有其他人提供更好的解决方案，即纯CSS和正确的顺序，我将接受这个答案。@AlexStack我将为您制作一个纯CSS示例，但不会是您的方式；“第三种可能：将盒子包装在容器中，并相应地使容器浮动”。我不明白。你能提供一些示例代码吗？@AlexStack是的，这就是我正在做的：）谢谢。我对你先前的解决方案也有疑问。如果我再添加几个框，它们不会填充在浮动元素左侧创建的空间：

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