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

【问题标题】：How to add different colours to columns of the website如何为网站的列添加不同的颜色
【发布时间】：2016-11-26 02:00:35
【问题描述】：

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

HTML 代码：

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

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

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

【问题讨论】：

能否包含您正在使用的 CSS？
我已经添加了上面的代码。我没有太多的代码技能，所以我什至不确定我是否正确地做到了这一点。感谢帮助
这是您使用的真实代码吗？因为您发布的内容会将代码应用于大量文本
是的。我尝试添加另一个 div 但只是重叠它所以我删除了它。代码就是我所拥有的
查看我的评论和下面的其他人的解决方案，并确保接受最有帮助的正确答案

标签： html css grid web two-columns

【解决方案1】：

你想要什么样的颜色形式？如我所见，只有一个#myeducation1，没有#myeducation2。如果你想在同一张表的两列上绘制不同的颜色，你应该在 .col-xs-6 上修改每一个，而不是 #myeducation1。顺便说一句 .col-xs-6 css 适用于所有具有此 css 的元素。通过为每个添加另一个类来分隔它们

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案3】：

您刚刚忘记添加另一个 div。将myeducation1 的ID 添加到一个div，将myeducation2 添加到另一个，它应该可以工作

【讨论】：

【解决方案4】：

这是因为您没有在 html 代码上使用 #myeducation2。我添加了一个 sn-p，也只添加了该 id。

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

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

<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>

【讨论】：