html - DIV 对齐和位置

Question

我试图让我的头版区域彼此下方，目前我有下一个区域在下方但位于左侧。

我希望能够更改下一个区域的背景颜色。

关于 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;
    }

Answer 1

如果你想为每个区域设置不同的背景颜色，你必须在 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*/
}