---
tags: 公益程式體驗營 - 2022
---

# 🏅 5/13(五) 每日切版任務 - RWD 練習 II
## 題目

* 用 Codepen 練習以下 RWD 畫面 :

做出響應式排版：任務中已提供 HTML 的部分，請同學將 CSS 內有「...」部分替換成 CSS 語法，練習將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，如圖所示：
>桌機尺寸時設為四個一排


>平板尺寸時設定為兩個一排


>手機尺寸時設定為一個一排


請在 Pen Settings 設定 CSS Reset，如圖：


---

### HTML

<div class="container">
    <div class="main">
      <div class="card">
        <img class="card-img"
          src="https://upload.cc/i1/2022/05/10/7Bjium.jpg">
        <div class="card-body">
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.</p>
          <small>9 mins</small>
          <button class="card-btn">點我</button>
        </div>
      </div>
      <div class="card">
        <img class="card-img"
          src="https://upload.cc/i1/2022/05/10/ClEwNU.jpg">
        <div class="card-body">
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.</p>
          <small>9 mins</small>
          <button class="card-btn">點我</button>
        </div>
      </div>
      <div class="card">
        <img class="card-img"
          src="https://upload.cc/i1/2022/05/10/xXOD1Y.jpg">
        <div class="card-body">
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.</p>
          <small>9 mins</small>
          <button class="card-btn">點我</button>
        </div>
      </div>
      <div class="card">
        <img class="card-img"
          src="https://upload.cc/i1/2022/05/10/aY5bAg.jpg">
        <div class="card-body">
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.</p>
          <small>9 mins</small>
          <button class="card-btn">點我</button>
        </div>
      </div>
    </div>
  </div>

### CSS

img {
    ...
    height: auto;
}

.container {
    ...
    margin: 0 auto;
}

.main {
    display: flex;
    flex-wrap: wrap;
}

.card {
    ...
}

@media (max-width: 768px) {
    .card {
        ...    
    }
    .container {
        max-width: 720px;
    }
}
@media (max-width: 576px) {
    .card {
        ...
    }
    .container {
        max-width: 540px;
    }
}

<!--
ans:
[RWD02](https://codepen.io/DoLucky/pen/dydMKyd?editors=1100)
-->
---

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!-- 解答： -->

回報區
---
<!-- 1. yunyun
Codepen：https://codepen.io/yun_yunni/pen/rNJMqqM
-->

<!-- 2. JackC
Codepen：https://codepen.io/key0329/pen/poaExxv
-->

<!-- 3. CloThEs
答案：
Codepen：https://codepen.io/bogwdnxx-the-sans/pen/GRQjYYY
-->

<!-- 4. su#7798
codepen: https://codepen.io/wc-su/pen/ZErpMeq
-->

<!-- 4. hsiuhsiu
codepen: https://codepen.io/hsiuhsiu/pen/wvyzYRZ
-->

<!-- 5. Chi
Codepen: https://codepen.io/YoChi84/pen/xxYEymr
-->

<!-- 6. bonnieli1414#4906
Codepen: https://codepen.io/bonnieli1414/pen/bGLwmXX
-->

<!-- 6. Ｊenny_
Codepen: https://codepen.io/Jenny_000/pen/PoQGxwg
-->

<!-- 7. 白狐
Codepen：https://codepen.io/baihu7851/pen/rNJMQxm
-->

<!-- 8. Leo Song
Codepen:
https://codepen.io/sunnylaba/pen/mdXrQJv?editors=1100
-->

<!-- 9.IreneLee
codepen:
https://codepen.io/ntjtcxpt-the-animator/pen/QWQKJKy
-->

<!-- 10.Raymond Lam#0344
codepen:
https://codepen.io/manshun-lam/pen/VwQKVwB
-->

<!-- 11. Cheng-Yu#1813
codepen:
https://codepen.io/ball77111/pen/qBxaQgg
-->

<!-- 12. Chaoci#2460
Codepe:
https://codepen.io/gmailchao/pen/dydpQea
-->

<!-- 13. yuyu#6310
Codepen: https://codepen.io/yuyu0905/pen/RwQGqLm?editors=1100
-->

<!-- 14. RJRS#9430
Codepen: https://codepen.io/RJRS/pen/JjpRezw
-->

<!-- 15. 花禮湖燒#7359
Codepen: https://codepen.io/lai-pei/pen/gOvwQNP
-->

<!-- 16. Jason Chen
Codepen: https://codepen.io/jason60810/pen/rNJMqgj
-->

<!-- 17.HiyukiOuO # 8072
codepen: https://codepen.io/Befei/pen/MWQjzdr?editors=1100
-->

<!-- 18. Peng
https://codepen.io/peng-027/pen/YzeGdzz
-->

<!-- 19. Hao#2485
https://codepen.io/hao216/pen/oNEzzRY
-->

<!-- 20. LHchien
https://codepen.io/lin_chien/pen/zYRKyxm?editors=1100
-->

<!-- 21. EllieLo#9809
https://codepen.io/ellie-lo/pen/LYQRMGK
-->

<!-- 22. Jia-Hong Chen#3863
codepen: https://codepen.io/iloveleon19/pen/VwQKqew
-->

<!-- 23. Erica Chen#6929
codepen: https://codepen.io/ericachen/pen/eYVdbOK
-->

<!-- 24. Cliff
https://codepen.io/Cliff_hex/pen/wvyzRjP
-->

<!-- 25. Mitour#0672
https://codepen.io/mitour/pen/rNJMoog
-->

<!-- 26. 眠瀾#8857
CodePen: https://codepen.io/laron9486/pen/XWZjoOv
-->

<!-- 27. Aaron
Codepen : https://codepen.io/narrowd4c/pen/OJQRreQ
-->

<!-- 28. Joyce#3790
https://codepen.io/joycehuang/pen/oNEzJrz?editors=1100
-->

<!-- 29. #EVC1876
Codepen: https://codepen.io/elvi-chuang/pen/PoQGVqQ?editors=1100 -->

<!-- 30. Yuhung#1391
codepen: https://codepen.io/Yu__hung/pen/KKQgJpJ?editors=1100
-->

<!-- 31. Vera#5592
codepen: ㄊ
-->

<!-- 32. Kiwi#9804
codepen: https://codepen.io/kiwi1113/pen/RwQGvpx
-->

<!-- 33. ajhappy#6488
codepen: https://codepen.io/ajhappy5438/pen/ZErpwJY
-->

<!-- 34. 翁來
codepen: https://codepen.io/wguo8320/pen/mdXrvMx
-->

<!-- 35. NaRa#7954
codepen: https://codepen.io/chou-nara/pen/KKQgJaL
-->

<!-- 36. Stanley#3825
codepen: https://codepen.io/sean_1215/pen/eYVdbMx
-->

<!-- 37. Katie
codepen: https://codepen.io/Katie24/pen/ExQgrog
-->

<!-- 38. Jill#5577
CodePen: https://codepen.io/Jillkate/pen/YzeGBYY
-->

<!-- 39. kuo
CodePen: https://codepen.io/sunny-sun/pen/JjpRwvj
-->

<!-- 40. Muse#9741
CodePen: https://codepen.io/mu24/pen/xxYEMrR
-->

<!-- 41. Knn#0492
CodePen: https://codepen.io/Knn_84/pen/vYdXbQr
-->

<!-- 42. 君Jyun#0147

https://codepen.io/Okaybeok/pen/xxYEBgW
-->

<!-- 43. Lina Chen
Codepen:https://codepen.io/LinaChen/pen/mdXroLN
-->

<!-- 44. Bao#4997
Codepen:https://codepen.io/baoh/pen/ExQgMav?editors=1100
-->

<!-- 45. Nini Chen#5790
Codepen:https://codepen.io/ninistyle/pen/QWQKPbM?editors=1100
-->

<!-- 46. EG#7172
CodePen:
https://codepen.io/paneg-jpeg/pen/JjpRVEQ
-->

<!-- 47. 鹿欸#5974
Codepen: https://codepen.io/deersheep/pen/yLvaroq
-->

<!-- 48. Sweet
Codepen: https://codepen.io/Pei-Ying/pen/JjpRVLP
-->

<!-- 49. How#5806
Codepen: https://codepen.io/howtobefine/pen/mdXrYRp
-->

<!-- 50. Tuhacrt#0008
Codepen: https://codepen.io/Tuhacrt/pen/oNEzRbB
-->

<!-- 51. andersonshen#4675
Codepen: r
-->

<!-- 52. JustinLiu
Codepen: https://codepen.io/justin0227/pen/qBxazNo?editors=1100
-->

<!-- 53. 安安你好你是誰#7416
Codepen: https://codepen.io/hsiuhsiu/pen/wvyzYRZ?editors=1100
-->

<!-- 54. Ryan Lu#3642
Codepen: https://codepen.io/ryanlu1125/pen/BaYLbJN?editors=1100
-->

<!-- 55. lyle#8123
Codepen: https://codepen.io/tomys/pen/GRQjbbJ
-->

<!-- 56. 鉦勝#8333
Codepen: https://codepen.io/atckmax823/pen/jOZMgYz
-->

<!-- 57. 小不點#1793
Codepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/mdXObrq
-->

<!-- 58.
https://codepen.io/Adif/pen/poaNzgY?editors=1100
-->

<!-- 59. Bruno Yu
Codepen:https://codepen.io/bruno-yu/pen/poaNzrX
-->

<!-- 60. amy芳#1385
Codepen:https://codepen.io/amy-chieng/pen/WNMoeMW
-->

<!-- 61. shujhen#7734
Codepen：https://codepen.io/shujhen/pen/jOZVNdN
-->

<!-- 62. 黑松胖#4836
Codepen:https://codepen.io/yi-chien-hsieh/pen/NWyRJRq?editors=1100
-->

<!-- 63. RayChen#6088
Codepen:https://codepen.io/raychen1996/pen/bGLBGLV
-->

<!-- 64. 阿基基
https://codepen.io/JIJI_GNI/pen/bGLBGyw
-->

<!-- 65. Triple
https://codepen.io/riku30/pen/qBxqEdw
-->

<!-- 66. 雷雷#7844
https://codepen.io/lei-yi-jie/pen/ExQNjXK
-->

<!-- 67. yuling
Codepen:https://codepen.io/igzdflpu/pen/mdXrNPV
-->

<!-- 68. deveryone#8090
https://codepen.io/raycheng/pen/VwQmLep
-->

<!-- 69. Charlotte Lee
https://codepen.io/charlotte-lee/pen/gOvLaKY?editors=1100
-->

<!-- 70. SASIMI #5099
Codepen:
https://codepen.io/sashimi1327/pen/OJQbpQp
-->

<!-- 71. 小天 #7177
Codepen:
https://codepen.io/linyujing/pen/gOvLmNx
-->

<!-- 72. Jason999220 #9326
Codepen:
https://codepen.io/Jason999220/pen/RwQoVOJ
-->

<!-- 73. Carrie #2750
Codepen:https://codepen.io/carrie-wang/pen/ZErBKgW
-->

<!-- 73. 邊邊#2293
Codepen:https://codepen.io/WinnieTsao/pen/MWQboej?editors=1100
-->

<!-- 74. Arista
Codepen:https://codepen.io/arista-hsieh/pen/ExQNXrL
-->

<!-- 75. Josh Chen#4552
Codepen:https://codepen.io/hiphop825/pen/MWQbvvX
-->

<!-- 76. 米金#1399
https://codepen.io/ihrowjtq-the-vuer/pen/oNEYePX
-->

<!--77. TunacanBoy#2206
https://codepen.io/JamesDesign/pen/MWQbEeR
-->

<!-- 78. LCC#9012
codepen:https://codepen.io/pamelaxchun/pen/WNMoZaW
-->

<!-- 79. Ayre#0016
Codepen:https://codepen.io/yichunlin09/pen/RwQoxzK
-->

<!-- 80. 靜宜#6866
Codepen:https://codepen.io/jamie18/pen/vYdydrp
-->

<!-- 81. rubyruby
Codepen:https://codepen.io/Ruby0831/pen/jOZVZXj
-->

<!--82. Greta#0837
Codepen: https://codepen.io/gretali/pen/NWybYRK
-->

<!--83. ling chang#1024
Codepen: https://codepen.io/ling-chang/pen/NWybzeJ
-->

<!--84. Lyndon.Su #6018
Codepen: https://codepen.io/LyndonSu/pen/qBxqJRZ
-->

<!--85. kk28976328#1197
Codepen: https://codepen.io/kk28976328/pen/OJQbGOb
-->

<!-- 86. yen#5757
codepen:https://codepen.io/TZU-HUANG-YEN/pen/XWZNQzx -->

<!-- 87. Van.CS #2067
codepen: https://codepen.io/fbacojji-the-selector/pen/LYQboNG?editors=1100
-->

<!-- 88. Chaco #2993
codepen: https://codepen.io/chaco-wang/pen/gOvLNXy?editors=0100
-->

<!-- 89. hw#0715
Codepen: https://codepen.io/Lhwei/pen/yLvVmJz
-->

<!-- 90. Tori#1287
Codepen: https://codepen.io/FlyTori/pen/mdXONLP
-->

<!-- 91. Alphacostankion#8475
Codepen:
https://codepen.io/alphapolo/pen/wvyoVEe
-->

<!-- 92. Cynthia1111
Codepen:
https://codepen.io/Cynthia1111/pen/MWQJgWz?editors=1100
-->

<!-- 93. 楓之聲#6945
Codepen:https://codepen.io/sshane258/pen/mdXREdK
-->

<!-- 94. xuan#0808
Codepen:https://codepen.io/xuan0915/pen/xxYgEPM?editors=1100
-->
<!-- 94.亞芽#1185
https://codepen.io/sanahsu/pen/yLvgXVN
--->

<!-- 96. azami#5986
codepen : https://codepen.io/azami/pen/WNMRELZ -->

<!-- 97. Easton#3863
Codepen: https://codepen.io/EastonIsCodingNow/pen/wvygrLQ
-->

<!-- 98. 小鹿Kerwin#5730
Codepen: https://codepen.io/tkoleo84119/pen/MWQJOoy
-->

<!-- 99. 艾芮絲#6060
Codepen: https://codepen.io/wangyingju/pen/bGLgGMG
-->

<!-- 100. Lynn73 #3164
Codepen: https://codepen.io/LYNN0703/pen/MWQJVOy
-->

<!--101 Tsuei#9284
Codepen: https://codepen.io/AlbertoLL/pen/ExQZLOG
-->

<!-- 102 J_u_d_y#5993
CodePen:https://codepen.io/J_u_d_y/pen/gOvgezE?editors=1100
-->

<!-- 102 Omi#3467
CodePen:https://codepen.io/chian0501/pen/RwQKYGz
-->

<!-- 103 WilliamChou#7375
CodePen:https://codepen.io/williampo78/pen/KKQaaJg
-->

<!-- 104. Mylène
Codepen: https://codepen.io/hamajibashi/pen/YzeGmeq
-->

<!-- 105.ozawa#8815
https://codepen.io/PIN-HSIN/pen/wvyzaBY -->

<!-- 106.Jamie
https://codepen.io/Wu220103/pen/BaYWBBW -->

<!--107. Arvin#6347
https://codepen.io/family929317/pen/poaeEWP?editors=1100
-->

<!-- 108. Mojito#6002
codepen: https://codepen.io/vu3xk41997/pen/VwQpXvW
-->

<!-- 109. 隔壁小王
Codepen
-->

<!-- 108. 黑白兔#0684
codepen: https://codepen.io/johnny329/pen/XWZMxNo
-->

<!-- 111. Vicky Chang#8846
Codepen:
https://codepen.io/cychang/pen/KKQWBLd?editors=1100
-->

<!-- 112. 諾拉#4800
Codepen:
https://codepen.io/Naomi_riayun/pen/yLvbXar
-->

<!-- 113. skypassion5000#4151
Codepen：https://codepen.io/skypassion5000/pen/MWQmrwy?editors=1100
-->

<!-- 114. Dun Dun#9857
Codepen：https://codepen.io/dundun/pen/wvydjxa
-->

<!-- 115. CHIA#3031
Codepen：https://codepen.io/chiachiaD/pen/KKQmGYB?editors=1100
-->

<!-- 116. Cora #3153
Codepen：https://codepen.io/coracola/pen/BaYZKoj
-->

<!-- 117. weihsin#5643
Codepen：https://codepen.io/weisin/pen/mdXwRyR?editors=1100
-->

<!-- 118. ChaoChao
https://codepen.io/EmiiilyJ/pen/eYVRVPj
-->

<!-- 119.danny123
codepen: https://codepen.io/binlandz123/pen/ZErymBw
-->

<!-- 120.Newman
codepen: https://codepen.io/newmankz/pen/oNEwQpL?editors=1100
-->

<!-- 121. Marco Yin #2673
codepen:https://codepen.io/Marcoyin/pen/JjpJxNm
-->

<!-- 122. 小羅#9921
codepan:https://codepen.io/peizhen0609/pen/RwQgvpX
-->

<!-- 123. AmberC#1372
https://codepen.io/AmberChuang/pen/NWygVrN
-->

<!-- 124.LIan Chen
https://codepen.io/CCL1007/pen/MWQvjgN -->

<!-- 125. Jean
https://codepen.io/jean-liu/pen/JjpEKZp
-->

<!-- 126. 狸貓#9725
https://codepen.io/leeemo/pen/dydzjob
-->

<!--127.Vito#7797
https://codepen.io/Vito_Yang/pen/gOvGmEB
-->

<!-- 128. H2CO3#7232
https://codepen.io/guan-zhen-wang/pen/wvyrzgx?editors=1100
-->

<!-- 129.piha#9987
https://codepen.io/pihahaha/pen/MWQEXLo
-->

<!-- 130.JessieCho
https://codepen.io/jessieCho/pen/JjprVQN
-->

<!--131.CrystalD#6007
https://codepen.io/Crystaldu/pen/XWZzyvo
-->

<!--132. zera#6060
codepen: https://codepen.io/zera-tseng/pen/abqEbrM
-->

<!--133. mei#8421
codepen: https://codepen.io/Shila-Chen/pen/wvypXwX
-->

<!--134. YC#2008
Codepen: https://codepen.io/danisternburg/pen/WNMXPLv?editors=1100
-->

<!--135. Yurii#7455
Codepen: https://codepen.io/Yurii-Wen/pen/oNEdmOL?editors=1100
-->

<!--136. Jumpye#8601
Codepen: https://codepen.io/Jumpye/pen/qBxKEaY?editors=1100
-->
<!--137. Vivian#9511
Codepen:https://codepen.io/Vivianliuu/pen/BaYVrqG?editors=1100

<!-- 138. WeiKai#1867
Codepen: https://codepen.io/beginneraboutlife116/pen/gOvjdoq

-->

<!-- 139. Eileen#6454
Codepen:
https://codepen.io/Eileen-io/pen/QWQVLEK
-->
<!--
140. Barret#1119
https://codepen.io/barret0720/pen/QWQVawY -->

<!-- 141. JOU#6876
https://codepen.io/joujoujou924/pen/oNEPROO?editors=1100 -->

<!-- 142. Zoey#0839
https://codepen.io/zoec/pen/abqPVzE
-->