如何在html/css中分隔2个div框？

Question

我正在尝试制作我的第一个投资组合网站，我看过一些关于如何制作卡片的教程，当你将鼠标悬停在上面时，卡片会翻转并显示一些信息。然而，当我去添加另一张完全相同类型的卡片时，它只是直接位于旧卡片之上并且不会移动。我怎样才能让我制作的 4 张卡片显示在 2 x 2 维度中，如下所示：

第一张⠀⠀第二张

第三张⠀⠀第四张

而不是直接在顶部，同时保持移动友好？非常感谢。

HTML

    <div class="card middle">
        <div class="front">
            <img src="sql.png" alt="sql">
        </div>
        <div class="back">
            <div class="back-content middle">
                <h2>SQL</h2>
                <span>Database Query Tool</span>
                <div class="sm">
                    <p>SQL (STRUCTURED QUERY LANGUAGE). SQL LETS YOU ACCESS AND MANIPULATE DATABASES.
                            A QUERY LANGUAGE IS A KIND OF PROGRAMMING LANGUAGE THAT'S DESIGNED TO FACILITATE
                            RETRIEVING SPECIFIC INFORMATION FROM DATABASES, AND THAT'S EXACTLY WHAT SQL DOES.
                            I HAVE EXPERIENCE USING MYSQL AND SSMS (SQL SERVER MANAGEMENT STUDIO).</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card middle">
        <div class="front">
            <img src="csharp.png" alt="sql">
        </div>
        <div class="back">
            <div class="back-content middle">
                <h2>SQL</h2>
                <span>Database Query Tool</span>
                <div class="sm">
                    <p>SQL (STRUCTURED QUERY LANGUAGE). SQL LETS YOU ACCESS AND MANIPULATE DATABASES.
                            A QUERY LANGUAGE IS A KIND OF PROGRAMMING LANGUAGE THAT'S DESIGNED TO FACILITATE
                            RETRIEVING SPECIFIC INFORMATION FROM DATABASES, AND THAT'S EXACTLY WHAT SQL DOES.
                            I HAVE EXPERIENCE USING MYSQL AND SSMS (SQL SERVER MANAGEMENT STUDIO).</p>
                </div>
            </div>
        </div>
    </div>

CSS

*{
    margin: 0;
    padding: 0;
}


.middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.card {
    cursor: pointer;
    width: 300px;
    height: 450px;
}

.front, .back{
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    position: absolute;
    transition: transform .6s linear;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 8%);
    border-radius: 2%;
}

.front img {
    height: 55%;
    width: 80%;
    padding-left: 30px;
    padding-top: 95px;
}

.front {
    transform: perspective(600px) rotateY(0deg);
}

.back {
    background: #ffff;
    transform: perspective(600px) rotateY(180deg);
}

.back-content {
    color: #2c3e50;
    text-align: center;
    width: 100%;
}

.sm {
    margin-top: 15px;
}

.sm p {
    justify-content: center;
    font-size: 12px;
    padding: 20px;
}

.card:hover > .front {
    transform: perspective(600px) rotateY(-180deg);
}

.card:hover > .back {
    transform: perspective(600px) rotateY(0deg);
}

Answer 1

您可以使用 CSS Grid 或 Flexbox。只需添加这两行 CSS Grid 就可以完成您想要的大部分工作，但观看一些教程，您将成为专家。

.wrapper{
  display:grid;
  grid-template-columns: 1fr 1fr;
}

*{
    margin: 0;
    padding: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.middle {
    position: relative;
}
.card {
    cursor: pointer;
    width: 300px;
    height: 450px;
}

.front, .back{
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    position: absolute;
    transition: transform .6s linear;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 8%);
    border-radius: 2%;
}

.front img {
    height: 55%;
    width: 80%;
    padding-left: 30px;
    padding-top: 95px;
}

.wrapper{
  display:grid;
  grid-template-columns: 1fr 1fr
}
.front {
    transform: perspective(600px) rotateY(0deg);
}

.back {
    background: #ffff;
    transform: perspective(600px) rotateY(180deg);
}

.back-content {
    margin-top:50px;
    color: #2c3e50;
    text-align: center;
    width: 100%;
}

.sm {
    margin-top: 15px;
}

.sm p {
    justify-content: center;
    font-size: 12px;
    padding: 20px;
}

.card:hover > .front {
    transform: perspective(600px) rotateY(-180deg);
}

.card:hover > .back {
    transform: perspective(600px) rotateY(0deg);
}

<div class="wrapper">
  <div class="card middle">
        <div class="front">
            <img src="https://placekitten.com/300/400" alt="sql">
        </div>
        <div class="back">
            <div class="back-content middle">
                <h2>SQL</h2>
                <span>Database Query Tool</span>
                <div class="sm">
                    <p>SQL (STRUCTURED QUERY LANGUAGE). SQL LETS YOU ACCESS AND MANIPULATE DATABASES.
                            A QUERY LANGUAGE IS A KIND OF PROGRAMMING LANGUAGE THAT'S DESIGNED TO FACILITATE
                            RETRIEVING SPECIFIC INFORMATION FROM DATABASES, AND THAT'S EXACTLY WHAT SQL DOES.
                            I HAVE EXPERIENCE USING MYSQL AND SSMS (SQL SERVER MANAGEMENT STUDIO).</p>
                </div>
            </div>
        </div>
    </div>

    <div class="card middle">
        <div class="front">
            <img src="https://placekitten.com/300/350" alt="sql">
        </div>
        <div class="back">
            <div class="back-content middle">
                <h2>CATS</h2>
                <span>Catatonic Animals That Sleep</span>
                <div class="sm">
                    <p>DOGS HAVE FAMILY, CATS HAVE STAFF.</p>
                </div>
            </div>
        </div>
    </div>
    </div>

参考文献：

CSS Grid Tutorial - TheNetNinja

https://www.smashingmagazine.com/2020/01/understanding-css-grid-container/

Answer 2

我把你的 .middle class 改成了 position: relative 并且我还把整个东西（两张卡片）都包装到了一个新的容器里 display: flex

*{
    padding: 0;
}

.container {
    display: flex;
}

.middle {
    position: relative;
}

.card {
    cursor: pointer;
    width: 300px;
    height: 450px;
}

.front, .back{
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    position: absolute;
    transition: transform .6s linear;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 8%);
    border-radius: 2%;
}

.front img {
    height: 55%;
    width: 80%;
    padding-left: 30px;
    padding-top: 95px;
}

.front {
    transform: perspective(600px) rotateY(0deg);
}

.back {
    background: #ffff;
    transform: perspective(600px) rotateY(180deg);
}

.back-content {
    color: #2c3e50;
    text-align: center;
    width: 100%;
}

.sm {
    margin-top: 15px;
}

.sm p {
    justify-content: center;
    font-size: 12px;
    padding: 20px;
}

.card:hover > .front {
    transform: perspective(600px) rotateY(-180deg);
}

.card:hover > .back {
    transform: perspective(600px) rotateY(0deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css" class="css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="card middle">
            <div class="front">
                <img src="sql.png" alt="sql">
            </div>
            <div class="back">
                <div class="back-content middle">
                    <h2>SQL</h2>
                    <span>Database Query Tool</span>
                    <div class="sm">
                        <p>SQL (STRUCTURED QUERY LANGUAGE). SQL LETS YOU ACCESS AND MANIPULATE DATABASES.
                                A QUERY LANGUAGE IS A KIND OF PROGRAMMING LANGUAGE THAT'S DESIGNED TO FACILITATE
                                RETRIEVING SPECIFIC INFORMATION FROM DATABASES, AND THAT'S EXACTLY WHAT SQL DOES.
                                I HAVE EXPERIENCE USING MYSQL AND SSMS (SQL SERVER MANAGEMENT STUDIO).</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="card middle">
            <div class="front">
                <img src="csharp.png" alt="sql">
            </div>
            <div class="back">
                <div class="back-content middle">
                    <h2>SQL</h2>
                    <span>Database Query Tool</span>
                    <div class="sm">
                        <p>SQL (STRUCTURED QUERY LANGUAGE). SQL LETS YOU ACCESS AND MANIPULATE DATABASES.
                                A QUERY LANGUAGE IS A KIND OF PROGRAMMING LANGUAGE THAT'S DESIGNED TO FACILITATE
                                RETRIEVING SPECIFIC INFORMATION FROM DATABASES, AND THAT'S EXACTLY WHAT SQL DOES.
                                I HAVE EXPERIENCE USING MYSQL AND SSMS (SQL SERVER MANAGEMENT STUDIO).</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

如何在html/css中分隔2个div框？

How to separate 2 div boxes in html/css?

html

css

frontend

mobile-website