ウェブサイトの列に異なる色を追加するには

Question

私のウェブサイトの2つの列に異なる色を追加したいのですが？私は色を述べているが、私は2色を追加することはできませんが表示されるCSSコードがあります。誰かが私が間違っていることを助けることができますか？ありがとう

HTMLコード：

<section id="education" name="education"></section> 
 
    <div id="myeducation1"> 
 
\t <div class="container"> 
 
\t  <div class="row"> 
 
\t \t <div class="col-xs-6"> 
 
\t \t <p>Donec id elit non mi porta gravida at eget metus.Donec id elit non mi porta gravida at eget metus.Donec id elit non mi porta gravida at eget metus.</p> 
 
\t \t </div> 
 
       <div class="col-xs-6"> 
 
\t \t <p>Donec id elit non mi porta gravida at eget metus.Donec id elit non mi porta gravida at eget metus.Donec id elit non mi porta gravida at eget metus.</p> 
 
\t \t </div> 
 
\t  </div> 
 
\t </div> 
 
    </div> 
 
</section>

#myeducation1 { 
 
    background: #FF8C00;/*yellow*/ 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
} 
 

 
#myeducation2 { 
 
    background: #ec576b;/*pink*/ 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
}

Answer 1

あなたは色のフォームのどのような種類をしたいですか？私が見たように＃myeducation1、＃myeducation2は1つしかありません。同じ表の2つの列に異なる色を塗りたい場合は、＃myeducation1ではなく、.col-xs-6をそれぞれ変更する必要があります。 Btw .col-xs-6 cssは、このcssを持つ要素のすべてに適用されます。それぞれ別のクラスを追加して区切ります。

Answer 2

あなたのCSSは2つの異なるIDを指し、1つだけが使用されます。必要なものを実現する簡単な方法は、これらのIDを正しい要素に適用することです。

改正コードは次のようになります（元のクラス#myeducation1と#myeducation2は列のdiv要素に直接を適用されている様子がわかり）

HTML：

<section id="education" name="education"></section> 
<div id="topDiv"> <!-- this class replaces the one you had here, keeping padding only --> 
    <div class="container"> 
    <div class="row"> 
     <div id="myeducation1" class="col-xs-6"> 
     <p>Donec id elit non mi porta gravida at eget metus.Donec id elit non mi porta gravida at eget metus.Donec id elit non mi porta gravida at eget metus.</p> 
     </div> 
     <div id="myeducation2" class="col-xs-6"> 
     <p>Donec id elit non mi porta gravida at eget metus.Donec id elit non mi porta gravida at eget metus.Donec id elit non mi porta gravida at </p> 
     </div> 
    </div> 
    </div> 
</div> 

CSS：

#topDiv { /* this replaces the old reference you had at #myeducation1*/ 
    padding-top: 30px; 
    padding-bottom: 30px 
} 

#myeducation1 { 
    background: #FF8C00; 
} 

#myeducation2 { 
    background: #ec576b; 
} 

Answer 3

これは、あなたが#myeducation2を使用しなかったあなたのHTMLコード。私はあまりにもそのIDを追加するだけでスニペットを追加しました。

#myeducation1 { 
 
\t background: #FF8C00;/*yellow*/ 
 
\t padding-top: 30px; 
 
\t padding-bottom: 30px; 
 
} 
 

 
#myeducation2 { 
 
\t background: #ec576b;/*pink*/ 
 
\t padding-top: 30px; 
 
\t padding-bottom: 30px; 
 
}

<section id="education" name="education"></section> 
 
\t <div > 
 
\t \t <div class="container"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-xs-6" id="myeducation1"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t <p>Donec id elit non mi porta gravida at eget metus.Donec id elit non mi porta gravida at eget metus.Donec id elit non mi porta gravida at eget metus. 
 
             </p> 
 
\t \t \t \t 
 
\t \t \t \t </div> 
 
           
 
            <div class="col-xs-6" id="myeducation2"> 
 
\t \t \t \t \t <p>Donec id elit non mi porta gravida at eget metus.Donec id elit non mi porta gravida at eget metus.Donec id elit non mi porta gravida at eget metus. 
 
             </p> 
 
\t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 

Answer 4

あなただけの他のdivを追加するために忘れてしまいました。 1つのdivにmyeducation1のIDを追加し、もう1つのdivにmyeducation2のIDを追加してください。