無法做出響應對齊

Question

截圖（我尋找的布局）：

我的代碼

 body { background: #000000 50% 50%; overflow-x: hidden; overflow-y: hidden; }.video{ margin: 50px 20px; display: grid; place-items: center; height: 80vh; }.left { text-align: left; }.right { text-align: right; }.container { display: flex; align-items: center; justify-content: center; }

 <head> <meta name="viewport" content="width=device-width,initial-scale=1,minimal-ui"> </head> <body> <div class="container"> <div class="left"> <p style="color: blue;">Title</p> <img src="https://place-hold.it/336x280" /> <br> <p style="color: blue;">Title</p> <img src="https://place-hold.it/280x500" /> </div> <div class="video"> <p style="color: blue;">Title</p> <img src="https://place-hold.it/500x500" /> </div> <div class="right"> <p style="color: blue;">title</p> <img src="https://place-hold.it/336x280" /> <br> <p style="color: blue;">Title</p> <img src="https://place-hold.it/280x500" /> </div> </div> </body>

我當前的代碼：適用於大桌面、大屏幕和分辨率但是，當我使用小桌面、移動設備和小分辨率屏幕檢查它時，布局會被遺漏。 我如何使這個響應？

Answer 1

從CSS中刪除了大部分代碼，並在屏幕縮小時使用flex-wrap包裝divs ，並為空間添加了justify-content:space-between 。

Change:在視頻div中添加了按鈕，因為視頻本身是一個 div，我給了它display:flex並更改了flex-direction:column align-items以使它們居中， p img button之間的gap:30px

 body { background: #000000 50% 50%; }.container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }.video { display: flex; flex-direction: column; align-items: center; gap: 30px; }.vid-btn { padding: 20px 150px; }

 <div class="container"> <div class="left"> <p style="color: blue;">Title</p> <img src="https://place-hold.it/336x280" /> <br> <p style="color: blue;">Title</p> <img src="https://place-hold.it/280x500" /> </div> <div class="video"> <p style="color: blue;">Title</p> <img src="https://place-hold.it/500x500" /> <button class="vid-btn">Button</button> </div> <div class="right"> <p style="color: blue;">Title</p> <img src="https://place-hold.it/336x280" /> <p style="color: blue;">Title</p> <img src="https://place-hold.it/280x500" /> </div> </div>

無法做出響應對齊

問題描述

1 個解決方案

解決方案1
1 2022-09-10 14:59:41

無法做出響應對齊

問題描述

1 個解決方案

解決方案1 1 2022-09-10 14:59:41

解決方案1
1 2022-09-10 14:59:41