使用div标签的布局

-4

我不擅长为页面制作布局和设计，但现在我一直在尝试约2个小时，以了解如何使用div标签制作此类布局。它看起来像标题和正文分成两半，而页脚只是底部的一个小栏。任何人都可以提供我的想法吗？使用div标签的布局

2015-02-06 user2254004

https://duckduckgo.com/?q=css+grid+boilerplate – Quentin 2015-02-06 09:52:10

你想要达到什么布局？你能分享你的HTML，所以我们可以看到你迄今为止做了什么？ – mindparse 2015-02-06 09:52:15

结账框架如[960.gs]（http://960.gs/）或引导程序 – gudthing 2015-02-06 09:52:24

下面的html代码是2列简单的布局。我认为这是你正在寻找的。

  <!doctype html> 
      <html> 
      <head> 
       <title>This is simple css layout using divs.</title> 
       <style> 
        *{ 
         margin: 0; 
         padding: 0; 
        } 

        .header{ 
         width: 100%; 
         height: 40px; 
         background-color: #aaaaaa; 
         padding: 10px; 
        } 

        .contain{ 
         padding: 15px; 
        } 

        .leftContain{ 
         width: 49%; 
         height: 300px; 
         background-color: green; 
         float: left; 
        } 

        .rightContain{ 
         width: 49%; 
         height: 300px; 
         background-color: blue; 
         float: right; 
        } 

        p{ 
         padding: 10px; 
        } 

        .footer{ 
         width: 100%; 
         height: 40px; 
         background-color: #aaaaaa; 
         padding: 10px; 
        } 

        .clear{ 
         clear: both; 
        } 

       </style> 
      </head> 
      <body> 
       <div class="container"> 

        <div class="header"> 
         <h4>Menu</h4> 
        </div> <!-- end of header--> 

        <div class="contain"> 

         <div class="leftContain"> 
          <p>division 1</p> 
         </div> <!-- end of leftContain --> 

         <div class="rightContain"> 
          <p>division 2</p> 
         </div> <!-- end of rightContain --> 

         <div class="clear"></div> 

        </div> <!-- end of contain --> 


        <div class="footer"> 
         <h4>footer</h4> 
        </div> <!-- end of footer --> 

       </div> <!-- end of container --> 
      </body> 
      </html>

来源

2015-02-06 15:15:20 Nawa

使用div标签的布局

回答

相关问题