divタグがラッピングブロックとして機能しないのはなぜですか？

私はカードを作るのに使っています。ただし、境界線をまったく提供していないようで、ページ全体が背景色を持っています。私は周りを変えようとしましたが、場所を変えましたが、うまくいきません。どうしてこれなの？以下は私のコードです。ここで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; 
    }

出典

2017-01-28 Manh Nguyen Huu

オブジェクトは（デフォルトは透明である）デフォルトでは、background-color属性を持っていません。透明なbackground-color以外のものを提供する場合は、それを定義する必要があります。

これを行う最も簡単な方法は、あなたの.cardクラス定義で、次の属性を設定することです：

background-color: white;

または

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

出典

2017-01-28 03:12:06

動作するようには思えません。あたかもカードのレイアウトがまったくないかのようにページ全体がまだ紺色です。 –

.cardクラス定義の角括弧{}内にこれを必ず追加してください。私はそれをテストしたが、うまくいった。 –

しました。それは何らかの理由で私のためには機能しません。 –

divタグがラッピングブロックとして機能しないのはなぜですか？

答えて

関連する問題