У меня есть 4 тега div, каждый из которых - дневной. понедельник, вторник, среда, четверг и т. д.. У меня 4 выровнены поплавком слева каждый 200px
шириной. Теперь у меня есть 3 тега div, каждый из которых является днем, также пятница, суббота, воскресенье, и я хочу расположить их по центру под четырьмя указанными выше.
<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;
}