gpt4 book ai didi

html - 使用 CSS 创建 Masonry 布局?

转载 作者:搜寻专家 更新时间:2023-10-31 08:54:22 24 4
gpt4 key购买 nike

<分区>

我只想使用 CSS 而不是 jquery 或 javascript 创建此布局。是否可能,如果可以,请将我指向正确的来源。谢谢你:)

我试过这个,但效果不佳: http://codepen.io/anon/pen/GJZWoX

HTML:

<div class="parent">

<div class="red">
</div>

<div class="blue">
</div>

<div class="red">
</div>

<div class="red">
</div>

</div>

CSS:

.parent{
width:330px;
}

.red{
float:left;
width:150px;
height:150px;
margin-bottom:10px;
margin-left:10px;
background-color:red;
}

.blue{
float:left;
width:150px;
height:300px;
margin-bottom:10px;
margin-left:10px;
background-color:blue;
}

enter image description here

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com