Q&A
html
1<html lang="en" dir="ltr"> 2 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="./postings.css"> 6 <title></title> 7</head> 8 9<body> 10 11 <div class="container"> 12 <header> 13 <div class="headerleft"> 14 <span>ABCさん</span> 15 </div> 16 <div class="headerright"></div> 17 </header> 18 19 <div class="box"> 20 <div class="leftlist"> 21 <ul class="menu"> 22 <li class="menu01"><a href="#">ニュースフィールド</a></li> 23 <li class="menu02"><a href="#">Messenger</a></li> 24 <li class="menu03"><a href="#">Watch</a></li> 25 <li class="menu04"><a href="#">イベント</a></li> 26 <li class="menu05"><a href="#">グループ</a></li> 27 </ul> 28 </div> 29 </div> 30 31 32 <div class="box"> 33 <div class="postings"> 34 <div class="dopost"> 35 <div class="dopostheader"> 36 <h3>新規投稿作成</h3> 37 </div> 38 <div class="warninglists"> 39 <h4><span></span>退会すると全てのデータが削除されます</h4> 40 <div class="lists"> 41 <ul> 42 <li>退会後もお支払い済みの分は受講可能です</li> 43 <li>再入会後に前回のデータを引き継ぐ事は出来ません</li> 44 <li>講師とのやり取りも削除されます</li> 45 </ul> 46 </div> 47 </div> 48 </div> 49 </div> 50 <div class="postings"> 51 </div> 52 </div> 53 54 <div class="box"> 55 <div class="friends"> 56 <p><span>ABC</span>DEF</p> 57 <p><span>ABC</span>DEF</p> 58 <p><span>ABC</span>DEF</p> 59 <p><span>ABC</span>DEF</p> 60 </div> 61 62 <div class="mayknow"> 63 <p><span>ABC</span>DEF</p> 64 <p><span>ABC</span>DEF</p> 65 <p><span>ABC</span>DEF</p> 66 <p><span>ABC</span>DEF</p> 67 </div> 68 </div> 69 </div> 70 71 72</body> 73 74</html>
css
1html { 2 font-family: sans-serif; 3} 4 5html * { 6 box-sizing: border-box; 7} 8 9* { 10 margin: 0 0 0 0; 11 padding: 0 0 0 0; 12} 13 14.container{ 15 width: 100%; 16 margin: 0 auto;; 17 background-color: #305997; 18} 19 20.box{ 21 background-color:#ffffff; 22 margin-top: 100px; 23 float: left; 24 width: 33%; 25 26} 27 28header { 29 text-align: left; 30 color: #ffffff; 31 height: 65px; 32 width: 100%; 33 background-color: #305997; 34 position: fixed; 35 z-index: 10; 36} 37 38header span { 39 line-height: 65px; 40 font-size: 22px; 41} 42 43.headerleft { 44 float: left; 45 line-height: 65px; 46 color: #ffffff; 47 font-size: 25px; 48} 49 50.headerright { 51 float: right; 52} 53 54.dopostheader { 55 height: 35px; 56 background-color: #42c7c1; 57 margin-bottom: 20px; 58} 59
.containerだけが反映されません。何故でしょうか。回答お願いします。
回答1件
0
ベストアンサー
floatは高さがなくなるので、クリアするか下記のようにするかしたらできるとおもいます。
CSS
1.container{ 2 width: 100%; 3 margin: 0 auto;; 4 background-color: #305997; 5 overflow: hidden;/* ADD */ 6}
投稿2018/12/16 11:56
総合スコア69400
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。