如何创建卡片

Question

我想使用 html 和 css 创建这样的卡，但我无法尝试。 谁能帮我？ 这是我的代码：

    <body>
    <div id=“container”>
    <img src=“test.jpeg” />
    <span>title 1</span>
    <span>title 2</span>
    </div>
    </body>

Answer 1

您可以为图像下方的文本创建一个单独的 div，如下所示：

<body>
    <div id=“container”>
        <img src=“test.jpeg” />
        <div class="inner-div">
            <span>title 1</span>
            <span>title 2</span>
        </div>
    </div>
</body>

（为了清楚起见，我缩进了代码）此外，您可以使用以下代码在 CSS 中添加一个边框到您的主 div 使其看起来更像一张卡片：

#container{
    border: 1px solid;
}