響應式4列Web布局HTML CSS DIV

Question

我正在尋找一個簡單的網站，但似乎無法正確地布局。 以下是我要拍攝的圖像以及代碼。

問題：是否每列（總共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>

Answer 1

為了更好地了解grid / divs / layout的工作方式，也許查閱有關Grids的 Bootstrap文檔會有所幫助。 http://getbootstrap.com/css/#grid

通常，您的.row包含.col （列），如下所示：

<div class="row">
  <div class="col-md-3">25% of the row</div>
  <div class="col-md-3">25% of the row</div>
  <div class="col-md-3">25% of the row</div>
  <div class="col-md-3">25% of the row</div>
</div>

Answer 2

是。 為了完成響應行為，列必須分別是一個獨立的div。 但是，為什么不使用Bootstrap或Foundation或其他CSS框架呢？ 無需嘗試重新發明輪子，只需使用現有輪子即可。 這些框架將為您完成工作。

響應式4列Web布局HTML CSS DIV

問題描述

2 個解決方案

解決方案1
1 2016-11-22 14:01:00

解決方案2
0 已采納 2016-11-22 13:59:14

響應式4列Web布局HTML CSS DIV

問題描述

2 個解決方案

解決方案1 1 2016-11-22 14:01:00

解決方案2 0 已采納 2016-11-22 13:59:14

解決方案1
1 2016-11-22 14:01:00

解決方案2
0 已采納 2016-11-22 13:59:14