0
シンプルなウェブサイトを構築しようとしていますが、レイアウトが正しく表示されないようです。以下は私のコードだけでなく、私が撮影しているもののいくつかの画像です。 
レスポンシブな4列ウェブレイアウトHTML CSS DIV
質問：すべての列（合計4）は、独自のdivになるん。各行はdivですか？各項目はdivですか？私はそれを混乱させる。また、コンテナやラッパーがここにどのように適用されるのだろうか。
以下のコード。
<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/* GRID OF FOUR */
.span_4_of_4 {
width: 100%;
}
.span_3_of_4 {
width: 74.6%;
}
.span_2_of_4 {
width: 49.2%;
}
.span_1_of_4 {
width: 23.8%;
}
/* GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
.col { margin: 1% 0 1% 0%; }
.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}
.header, .footer {
padding: 5px;
color: white;
background-color: black;
clear: left;
text-align: center;
}
.aboutus {
float:right;
margin: 5px;
padding: 5px;
width: 25%;
height: auto;
border: 1px solid black;
background-color:#123;
}
.aboutimage {
float:left;
margin: 5px;
padding: 5px;
width: 25%;
height: auto;
border: 1px solid black;
background-color:#123;
}
.about {
margin: 5px;
padding: 5px;
width: 100%;
height: 25%;
border: 1px solid black;
background-color:#989
}
.specials {
float: left;
margin: 10px;
padding: 10px;
width: 100%;
height: 300px;
border: 1px solid black;
background-color:#800;
}
.special1, .special2, .special3, .special4 {
margin: 1px;
padding: 1px;
width: 25%;
height: 50px;
border: 1px solid black;
background-color:#800;
}
.hours, .location {
margin: 5px;
padding: 5px;
width: 50%;
height: 150px;
border: 1px solid black;
background-color:#950;
}
.container{
float: center;
margin: auto;
padding: 10px;
width: 100%;
max-width: 1500px;
height: 1068px;
border: 1px solid red;
}
.logistics{
margin:1px;
padding:1px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<p>Restaurant</p>
<p>A family restaurant</p>
<span>This is some text that is going to span this div.</span>
</div>
<div class="about">
<div class="aboutus">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis.
</p>
</div>
<div class="aboutimage">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis.
</p>
</div>
</div>
<div class="specials">
<div class="chicken">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis.
</p>
</div>
<div class="pork">
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eget risus nibh. Aenean imperdiet ex ac viverra porta. Nulla tempor lorem nec augue tristique, sed molestie ante mattis. Donec et lorem non nibh eleifend auctor. Mauris congue metus in suscipit tincidunt. Pellentesque sem ligula, viverra eu sem a, bibendum convallis dolor. Fusce viverra mattis lobortis.
</p>
</div>
</div>
<div class="section group">
<div class="col span_1_of_4">
<p>This is some text</p>
</div>
<div class="col span_1_of_4">
<p>This is some text</p>
</div>
<div class="col span_1_of_4">
<p>This is some text</p>
</div>
<div class="col span_1_of_4">
<p>This is some text</p>
</div>
</div>
<div class="logistics">
<div class="hours">
<h2>Hours of operation</h2>
<p>Monday through Sunday</p>
<p>7:00 AM - 7:00 PM</p>
</div>
<div class="location">
<h2>Location</h2>
<p></p>
<p></p>
</div>
</div>
<div class="footer">Copyright © KR</footer> </div>
</body>
</html>
ありがとう：http://getbootstrap.com/css/#grid
通常はこのように、
.col（列）を持っている.rowを持っています！非常に使いやすい基盤を見つけています！大いに感謝します！ – Kevin