2016年11月8日 星期二

RWD 左側固定.... 右側流動




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/all01.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
  <script>
 
  </script>
</head>
<body>
 <div class="wrap">
  <div class="menu">
    <ul>
      <li><a href="#">超便宜攝影機</a></li>
      <li><a href="#">僅此一檔相機</a></li>
      <li><a href="#">限時優惠冰箱</a></li>
      <li><a href="#">超便宜電風扇</a></li>
    </ul>
  </div>
  <div class="content">
    打太可音地天多以著著易的天裡算車開部何,呢人家們高完戰組水樣性我天,他會熱一行係各中師於動重等合有兒方地。自區對,治加起,進山表保沒社不驗強具同不農我空提可們人天……個這部們明子大!

    球樓已長臺留不他師安神向天常面單別的學單有件多時紅年,說是專要政際眼我臺路合同種月山不上用聲趣?招是間效自新?步他只總。發公由員,下模包該度懷,有克仍痛究清晚;於指位不青重高準,天到眼會、那有增無他吸進黨成不間太毛文真師意下看廣想際戰。

    黨是山紅,麼術門格界他事說次意考去西性議年由過些須看,來父我重們樂,電企呢巴的什、完資喜沒品外商亞她去理內兒歡。背先賽共這同起,上大車接破好持我子更小沒到跟總場水。內中的為電一即必需;是接紙共的般成下來依維年謝校才,價往。

    陽的白生!人料你去冷工得十廣次紙濟的……要到就子有濟好的連流,影小地,道使百兒不來,吃營子?到外致就突步一公感生:看育經她獨相……易我機音人史習,德提年領那綠隊苦在題來修交兩率要東沒地財古年為美助大此空線地我去車員?
  </div>
 </div>
</body>
</html>

===================================================================

css:

.wrap{
  max-width: 800px;
  margin: 0 auto;
}
.menu{
  width: 200px;    //  給他固定200px
  float: left;
  color: blue;
  padding-top: 10px;
  background: #000;
}

.content{
  margin-left: 200px;  // 這邊的margin 改成和上面一樣 
  background: orange;
  color: #fff;
}

就可以造成左側固定...  右側是流動的layout











沒有留言:

張貼留言