正文
電腦螢幕時，固定 menu 寬度，content 自適應寬度
平版、手機時，變單欄式
1 | <div class="wrap"> |
2 | <div class="menu"> |
3 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, eaque magni harum amet |
4 | </div> |
5 | <div class="content"> |
6 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat fugit earum rem inventore neque officia |
7 | distinctio, nostrum laudantium quia sunt aspernatur amet tempora fugiat. Nostrum voluptate animi vero quam |
8 | beatae?Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae a quia deleniti quo temporibus |
9 | sapiente repudiandae corrupti? Debitis consequuntur et sapiente optio? Esse iusto eum exercitationem neque. |
10 | Eligendi, magnam quo? |
11 | </div> |
12 | </div> |
1 | .wrap{ |
2 | max-width: 960px; |
3 | margin: 0 auto; |
4 | display: flex; |
5 | } |
6 | |
7 | .menu{ |
8 | background-color: palevioletred; |
9 | padding: 10px; |
10 | width: 200px; /*固定 menu 寬度*/ |
11 | } |
12 | |
13 | .content{ |
14 | background-color: palegreen; |
15 | padding: 10px 20px; |
16 | margin-left: 10px; |
17 | } |
18 | |
19 | @media(max-width: 768px){ |
20 | .wrap{ |
21 | flex-wrap: wrap; /*使用 flex-wrap 將超出範圍的換行*/ |
22 | } |
23 | .menu{ |
24 | width: 100%; |
25 | } |
26 | .content{ |
27 | width: 100%; |
28 | margin-left: 0; |
29 | margin-top: 10px; |
30 | } |
31 | } |
成果
手機
電腦
