0

我有 4 个 div 标签，每个标签都是前一天。周一、周二、周三、周四等。我有 4 个由浮动对齐，每个200px宽。现在我有 3 个 div 标签，每个标签都是一天，也是friday saturday sunday，我想把它放在上面的 4 个下面。

<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;        
}
4

1 回答 1

1

你想达到这样的目标吗？您可以inline-block一起使用text-align:center;以使它们居中。

于 2013-05-08T04:27:34.770 回答