对齐3 divs在中心下4 divs

问题描述:

我有4个div标签每一个都是一天前。 星期一,星期二,星期三,星期四等。。我有4个对齐的浮动,每个200px宽。现在我有3个div标签,每个标签也是一天星期五星期六星期日,我想把它放在上面的4下面。对齐3 divs在中心下4 divs

<div id= "top-four-days"> 
    <br /> 
    <div class= "monday"> 
     <h2>Monday</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
     <h2>Evening</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
    </div> 
    <div class= "tuesday"> 
     <h2>Tuesday</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
     <h2>Evening</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
    </div> 
    <div class= "wednesday"> 
     <h2>Wednesday</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
     <h2>Evening</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
    </div> 
    <div class= "thursday"> 
     <h2>Thursday</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
     <h2>Evening</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
    </div> 
</div> 
<div id= "bottome-three-days"> 
    <br /> 
    <div class= "friday"> 
     <h2>Friday</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
     <h2>Evening</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
    </div> 
    <div class= "saturday"> 
     <h2>Saturday</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
     <h2>Evening</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
    </div> 
    <div class= "sunday"> 
     <h2>Sunday</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
     <h2>Evening</h2> 
     <br /> 
     <h3>Date:</h3> 
     <h3>Time:</h3> 
     <h3>Location:</h3> 
    </div> 
</div> 

风格

#top-four-days { 
    width: 800px;  
    } 
#bottom-three-days { 
    width: 800px; 
    background-color: #999; 
    } 

.monday { 
    width: 200px; 
    height: 300px; 
    background-color: purple; 
    float: left;   
} 

.tuesday { 
    width: 200px; 
    height: 300px; 
    background-color: #F00; 
    float: left;  
} 

.wednesday { 
    width: 200px; 
    height: 300px; 
    background-color: blue; 
    float: left;   
} 

.thursday { 
    width: 200px; 
    height: 300px; 
    background-color: yellow; 
    float: left;   
} 

.friday { 
    width: 200px; 
    height: 300px; 
    background-color: yellow; 
    float: left;   
} 
.saturday { 
    width: 200px; 
    height: 300px; 
    background-color: yellow; 
    float: left;   
} 
.sunday { 
    width: 200px; 
    height: 300px; 
    background-color: yellow; 
    float: left;   
} 

你想实现像this?您可以将inline-blocktext-align:center;一起使用,以使它们居中。