gpt4 book ai didi

jquery - 如何创建像这个图像 css 中的网格位置元素

转载 作者:行者123 更新时间:2023-11-28 12:38:37 25 4
gpt4 key购买 nike

如何创建此图像中的网格位置元素。我尝试像这张照片中那样用我的 div 元素构建网格位置,但我做不到。我尝试使用垂直对齐(我没有找到解决方案)和position:absolute(也不太好用)。你们能帮帮我吗?

enter image description here

谢谢!

最佳答案

这是我的结果的视觉效果:

3 columns

和代码(尽可能少):

<head>
<title></title>
<style>
div.main
{
clear: both;
}

div.main > div.column
{
position: relative;
width: 100px;
min-height: 500px;
float: left;
margin:5px;
}

div.main > div.column > .box
{
background-color: black;
min-height: 150px;
margin:2px;
}

div.main > div.column > .short.box
{
min-height: 100px;
}

div.main > div.column > .long.box
{
min-height: 200px;
}
</style>
</head>
<body>
<div class="main">
<div class="column">
<div class="box"></div>
<div class="long box"></div>
<div class="box"></div>
</div>
<div class="column">
<div class="long box"></div>
<div class="long box"></div>
</div>
<div class="column">
<div class="short box"></div>
<div class="box"></div>
<div class="short box"></div>
<div class="box"></div>
</div>
</div>

关于jquery - 如何创建像这个图像 css 中的网格位置元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27095914/

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