1つのdivの中の2つのクラスは動作しません

私は2つのdivと2つのクラスを持っていますが、これを次のようにしたいとします： < div class = "col-3 aside"> 、これで、なぜこれが起こりますか？どのようにそれらを1つにしても同じ結果が得られますか？1つのdivの中の2つのクラスは動作しません

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <style> 
 

 
    .row::after { 
 
     content: ""; 
 
     clear: both; 
 
     display: block; 
 
    } 
 
    [class*="col-"] { 
 
     float: left; 
 
     padding: 15px; 
 
    } 
 

 
    .aside { 
 
     background-color: #33b5e5; 
 
     padding: 15px; 
 
     color: #ffffff; 
 
     text-align: center; 
 
     font-size: 14px; 
 
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
 
    } 
 
    .footer { 
 
     background-color: #0099cc; 
 
     color: #ffffff; 
 
     text-align: center; 
 
     font-size: 12px; 
 
     padding: 15px; 
 
    } 
 

 
    .col-3 {width: 25%;} 
 

 
    @media only screen and (max-width: 768px) { 
 
     [class*="col-"] { 
 
      width: 100%; 
 
     } 
 
    } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <div class="row"> 
 
    <div class="col-3 "> 
 
     <div class=" aside"> 
 
     <h2>What?</h2> 
 
     <p>Chania is a city on the island of Crete.</p> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="footer"> 
 
     <p>Resize the browser window to see how the content respond to the resizing.</p> 
 
    </div> 
 
    </body>

出典

2017-11-01 Joonas Karppinen

基本的には、div要素とフッターの間の空白は、白い背景を持っているcol-3クラスパディング、です。 2つの部門に参加すると、脇の下の青い背景がcol-3の背景を上書きします。解決するには、クラス以外ににmargin-bottom: 15px;セレクタを追加してください。

スニペットをご覧ください。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .row::after { content: ""; clear: both; display: block; } [class*="col-"] { float: left; padding: 15px; } .aside { background-color: #33b5e5; padding: 15px; color: #ffffff; text-align: center; font-size: 14px; box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); margin-bottom: 15px; } .footer { background-color: #0099cc; color: #ffffff; text-align: center; font-size: 12px; padding: 15px; } .col-3 {width: 25%;} @media only screen and (max-width: 768px) { [class*="col-"] { width: 100%; } } </style> </head> <body> <div class="row"> <div class="col-3 aside"> <h2>What?</h2> <p>Chania is a city on the island of Crete.</p> </div> </div> <div class="footer"> <p>Resize the browser window to see how the content respond to the resizing.</p> </div> </body>

出典

2017-11-01 19:26:00

1つのdivの中の2つのクラスは動作しません

答えて

関連する問題