响应式4列Web布局HTML CSS DIV

Kevin 发表于 Dev

凯文

我正在寻找一个简单的网站，但我似乎无法正确地布局。以下是我要拍摄的图像以及代码。

问题：是否每列（总共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>

画家

是的。为了完成响应行为，各列必须分别是一个独立的div。但是，为什么不使用Bootstrap或Foundation或其他CSS框架。与其尝试重新发明轮子，不如使用现有的轮子。这些框架将为您完成工作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。