Question

我想在我的网站的两列添加不同的颜色？我有css代码说明颜色但我似乎无法添加两种颜色。有人可以帮我解决我做错了什么。谢谢

HTML代码：

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

overflow:hidden

Answer 1

您想要什么样的颜色？正如我所看到的，只有一个#myeducation1，没有#myeducation2。如果你想在同一个表中的两列上绘制不同的颜色，你应该在.col-xs-6上修改每一个，而不是#myeducation1。 Btw .col-xs-6 css适用于所有具有此css的元素。通过为每个

添加另一个类来分隔它们

Answer 2

你的css是指两个不同的ID，只使用一个。实现所需的简单方法是将这些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

之所以发生这种情况，只是因为您没有在html代码中使用#myeducation2。我还添加了一个片段，只是添加了该ID。

＆＃13;

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

＆＃13;

<section id="education" name="education"></section>
	<div >
		<div class="container">
			<div class="row">
				
				<div class="col-xs-6" id="myeducation1">
					
					<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 class="col-xs-6" id="myeducation2">
					<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>
		</div>
	</div>

＆＃13;

Answer 4

您只是忘了添加其他div。将myeducation1的ID添加到一个div，将myeducation2添加到另一个div，它应该可以正常工作

如何为网站的列添加不同的颜色

4 个答案: