html – 如何在图块中浮动不同大小的元素

前端之家收集整理的这篇文章主要介绍了html – 如何在图块中浮动不同大小的元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
问题很简单我有一堆将要制作瓷砖的元素.但是,其中有些较高;让我们说其他的两倍.我希望所有的人都可以通过纯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>

你可以在JSBin:http://jsbin.com/usovek/1/edit上试试

笔记:

>内容是动态的
>盒子数可以有所不同
>任何一个盒子可以更长.并且可能更广泛.
>箱子的宽度或高度总是多个单位.这个例子中的单位是50,一些框是50,有些是100px高.但是如果问题解决了任何数量的单位(1,2,3 …,它们是50px,100px,150px,…),这将是完美的.

解决方法

如果您的内容是静态的,您可以在相对定位的容器中使用位置绝对块,但如果内容是动态的,则不能使用CSS(仅)执行此操作,则需要使用的是

jQuery Masonry

或者你可以做的最好的是this

CSS

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

第三个可能性:
将盒子包裹起来,并相应地浮动

Demo(只有当静态时才可能):)

原文链接:https://www.f2er.com/html/224381.html

猜你在找的HTML相关文章