How to put two divs side by side

前端 未结 8 1109
情深已故
情深已故 2020-12-07 17:20

So I\'m quite new to writing code (about a few weeks) and I\'ve hit a wall while writing code for my website. I want to have a layout like this:

8条回答
  •  盖世英雄少女心
    2020-12-07 17:54

    This is just a simple(not-responsive) HTML/CSS translation of the wireframe you provided.

    HTML

    Video Explaning Site

    Sign up Info

    Website Info

    CSS

    .container {
      width:900px; 
      height: 150px;
    }
    
    header {
      width:900px; 
      float:left; 
      background: pink; 
      height: 50px;
    }
    
    .logo {
      float: left;
      padding: 15px
    }
    
    .menu {
      float: right;
      padding: 15px
    }
    
    .first-box {
      width:300px; 
      float:left; 
      background: green; 
      height: 150px;
      margin: 50px
    }
    
    .first-box p {
      color: #ffffff;
      padding-left: 80px;
      padding-top: 50px;
    }
    
    .second-box {
      width:300px; 
      height: 150px; 
      float:right; 
      background: blue;
      margin: 50px
    }
    
    .second-box p {
      color: #ffffff;
      padding-left: 110px;
      padding-top: 50px;
    }
    
    footer {
      width:900px; 
      float:left; 
      background: black; 
      height: 50px;
      color: #ffffff;
    }
    
    footer div {
      padding: 15px;
    }
    

提交回复
热议问题