为什么 div 标签不能用作包装块

我用来制作卡片。但是，似乎根本没有提供任何边界，因此整个页面都具有正文的背景色。我试图修补，改变位置，但它不起作用。这是为什么呢？下面是我的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../static/main.css">
    <title>Title</title>
</head>
<body>
<form method="POST" action="/" enctype="multipart/form-data">
    <div>{{ form.csrf_token }}</div>
    <div>{{ form.tweet_text()}}</div>
    <div>{{ form.tweet_image()}}</div>
<div>{{ form.submit()}}</div>
</form>
<div>
    <div class="card">
        <img src="http://media.npr.org/assets/news/2009/10/27/facebook1_sq-17f6f5e06d5742d8c53576f7c13d5cf7158202a9.jpg?s=16" alt="" />
        <h1>Rohit Falor</h1>
        <p>From the restored 540 K Streamliner to the all-new S65 AMG Coupe to the Concept Coupe SUV.</p>
    </div>
</div>

</body>
</html>

这是我的 CSS：

body{
    background-color : azure;
    }
.card{
     height: 100px;
     width: 350px;
     border: 1px solid gray;
     box-shadow: 1px 1px 3px #888;
     border-top: 10px solid green;
     min-height: 250px;
     padding: 10px;
     margin: 10px;
     }
img{
    border-radius: 50%;
    width: 70px;
    margin: 10px;
    }

默认情况下，

对象没有background-color属性（默认值为透明）。如果你想给它一个透明background-color ，你需要定义它。

执行此操作的最简单方法是在.card类定义中设置以下属性：

background-color: white;

或

background: white; /* This allows for more attributes */

相关内容

最新更新

热门标签：