我试图将我的首页区域放在彼此之下，此刻我的下一个区域位于下方，但位于左侧。
我希望能够更改下一个区域的背景颜色。
关于HTML / css的任何提示？
很抱歉CSS中的长标记我在wordpress中使用Avada做了一个儿童主题。
<div id="main-header">
What can we do for You and Your Company
</div>
<div id="main-index-container">
<div id="index-container">
<div class="services">
<img src="http://localhost:8888/Enviroble/wp-content/uploads/2014/03/Social-Media-Marketing.png" alt="social-media" height="91" width="60"> </img>
<h1>Energy Audits</h1>
<p> Nec nisl pede congue, ipsum nec justo cras bibendum, dui quis. Pretium rutrum elit malesuada sodales, in id et, sodales ut ipsum leo risus.</p>
</div>
</div>
<div id="index-container">
<div class="services">
<img src="http://localhost:8888/Enviroble/wp-content/uploads/2014/03/Social-Media-Marketing.png" alt="social-media" height="91" width="60"> </img>
<h1>Energy Audits</h1>
<p> Nec nisl pede congue, ipsum nec justo cras bibendum, dui quis. Pretium rutrum elit malesuada sodales, in id et, sodales ut ipsum leo risus.</p>
</div>
</div>
<div id="index-container">
<div class="services">
<img src="http://localhost:8888/Enviroble/wp-content/uploads/2014/03/Social-Media-Marketing.png" alt="social-media" height="91" width="60"> </img>
<h1>Energy Audits</h1>
<p> Nec nisl pede congue, ipsum nec justo cras bibendum, dui quis. Pretium rutrum elit malesuada sodales, in id et, sodales ut ipsum leo risus.</p>
</div>
</div>
<div id="index-container">
<div class="services">
<img src="http://localhost:8888/Enviroble/wp-content/uploads/2014/03/Social-Media-Marketing.png" alt="social-media" height="91" width="60"> </img>
<h1>Energy Audits</h1>
<p> Nec nisl pede congue, ipsum nec justo cras bibendum, dui quis. Pretium rutrum elit malesuada sodales, in id et, sodales ut ipsum leo risus.</p>
</div>
</div>
<div id="index-container">
<div class="services">
<img src="http://localhost:8888/Enviroble/wp-content/uploads/2014/03/Social-Media-Marketing.png" alt="social-media" height="91" width="60"> </img>
<h1>Energy Audits</h1>
<p> Nec nisl pede congue, ipsum nec justo cras bibendum, dui quis. Pretium rutrum elit malesuada sodales, in id et, sodales ut ipsum leo risus.</p>
</div>
</div>
<div id="index-container">
<div class="services">
<img src="http://localhost:8888/Enviroble/wp-content/uploads/2014/03/Social-Media-Marketing.png" alt="social-media" height="91" width="60"> </img>
<h1>Energy Audits</h1>
<p> Nec nisl pede congue, ipsum nec justo cras bibendum, dui quis. Pretium rutrum elit malesuada sodales, in id et, sodales ut ipsum leo risus.</p>
</div>
</div>
</div>
<div id="index-container-second">
<div id="wrapper">
<div id ="similar">
<div id="text">
<h1>Learn More</h1>
<h1>About us and our solutions...</h1>
<h4>We offer the product, skills and services, looking for an effective way of undertaking sustainability audits or too implement environmental initiatives.</h4>
<p>Arcu tempor scelerisque mollis, cras sapien, et dolor scelerisque tempor placerat, aliquam velit et sed vitae. Lectus ullamcorper turpis dictum, augue vulputate est ullamcorper turpis est.
Eegestas egestas ligula hendrerit, ante facilisis. Elementum volutpat eget, tellus vel mauris sapien luctus a, at aenean erat non non nulla, lorem amet, ligula justo amet. Nec lectus. Ut sociis pulvinar erat erat in sollicitudin, magna lectus phasellus, orci libero non. Suspendisse facilisis blandit porttitor. Nibh enim, ligula blandit commodo tristique blandit id et.</p>
</div>
</div>
</div>
</div>
CSS
/* Index page title container boxes */
div#main-header p {
color:#ffffff !important;
font-size:26px;
padding-top:85px;
text-align:center;
}
/* Index page container boxes */
div.post-content
div#main-index-container{
margin-left:auto;
margin-right:auto;
width:940px;
height:100%;
padding-left:15px;
padding-right:15px;
position:relative;
z-index:1;
clear:right;
}
div#index-container{
width:350px;
height:250px;
margin-left:25px;
margin-right:25px;
margin-bottom:35px;
background-color: #4f5455;
}
div#index-container div.index-container-image div.index-container-header{
Width: 280px;
height:auto px;
}
div#index-container div.services h1{
color: #ffffff !important;
font-size:16px !important;
padding-top:0px;
text-align:center;
margin-bottom: 0em !important:
line-height:5px !important;
}
div#main-index-container div#index-container div.services h1 {
line-height:5px !important;
}
div#index-container div.services p {
color:#ffffff !important;
font-size: 12px;
text-align:center;
padding-top:-10px;
padding-bottom:0px;
padding-left:18px;
padding-right:18px;
line-height:20px !important;
margin-bottom:0em !important:
}
div.post-content ul#servicesli {
display: block;
float: left;
margin-right: 16px;
padding-bottom: 0px;
width: 218px;
}
div#index-container {
width:250px;
float:left;}
div#index-container div.services p img {
display:block;
margin-left: auto;
margin-right: auto;
padding-top:20px;
padding-bottom:10px
padding-left:15px;
padding-right:15px;
}
/* Index page container 2 about us */
div#index-container-second{
float:left;
height:600px;
width:960px;
clear:left;
margin-right:auto;
margin-left:auto;}
div#index-container-second div#wrapper div#similar {
width:100%;
}
div#index-container-second div#wrapper div#similar div#text {
margin-left:auto;
margin-right:auto;
width:960px;
}
答案 0 :(得分：0)
如果您想为每个区域添加不同的背景颜色，则每个区域的html必须具有不同的id，以便通过CSS单独编辑它。
这是一个例子： HTML
<div id="index-container-2">
CSS
div#index-container-2 {
width: 350px;
height: 250px;
margin-left: 25px;
margin-right: 25px;
margin-bottom: 35px;
background-color: #336472; /*THIS IS TO CHANGE THE BACKGROUND COLOR*/
}