Question

如何创建此图像中的网格位置元素。我尝试用我的div元素构建网格位置，就像在这张照片中，但我不能这样做。我尝试使用vertical-align（我没有找到解决方案）和位置：绝对（不能正常工作）。你能帮帮我们吗？

enter image description here

谢谢！

Answer 1

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

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>

Answer 2

我建议给Bootstrap一个镜头。它提供了一个基本的网格结构，听起来像你正在寻找的东西。检查W3schools上的教程here。

如何在此图像css中创建网格位置元素

2 个答案: