CodePenでCSSが動作しない

これは簡単な質問です。誰かがそれを見てすぐに回答を得られると確信していますが、私のCSSは機能していません。どんな助けにも感謝！CodePenでCSSが動作しない

コードは以下ですが、codepenへのリンクはhttp://codepen.io/benyaaalex/pen/BRBMeW?editors=1000

<head> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
    <style> 
    body { 
     background-color: blue; 
    } 
    .container-fluid { 
     margin: 5%; 
     background-color: red; 
    } 
    </style> 
</head> 
<body> 
    <div class="container-fluid"> 
    </div> 
</body>

出典

2017-04-12 abenya

何が機能していませんか？背景色を持たない 'container-fluid'を参照しているのなら、その中に内容がないからです。 – GvM

あなたがスタイリングしているものの中にはコンテンツがありません。 'container-fluid''div'にテキストを追加すると、結果が得られます –

ああ、学習の瞬間:)ありがとう！ – abenya

であるあなたが表示されますいくつかのテキストおよび再実行を追加する場合は、スタイルにしようとしているdivの内部にはコンテンツがありませんそれは動作する。

出典

2017-04-12 02:21:51 akkatracker

正常に動作します。しかし、あなたは実際にそれにいくつかのコンテンツがあるまで、あなたのdivの背景色、余白などを取得するつもりはありません。空のdivはDOMに可視プロパティを持たない。

出典

2017-04-12 02:22:43 Difster

私のCSSは動作していないと私は間違って何をしたのか分からない！

CSSは問題ありません。

divタグの中に内容がないため、変更を見ることができません。
また、htmlタグが必要です。

<html> 
 
    <head> 
 
     <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 
 
     <style> 
 
     body { 
 
      background-color: blue; 
 
     } 
 
     .container-fluid { 
 
      margin: 5%; 
 
      background-color: red; 
 
     } 
 
     </style> 
 
    </head> 
 
    <body> 
 
     <div class="container-fluid"> 
 
     What is Lorem Ipsum? 
 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
     </div> 
 
    </body> 
 
</html>

出典

2017-04-12 02:22:50

答えて

関連する問題