巧用 CSS 媒体查询：实现网页两 div 在 PC 端左右、移动端上下显示

要实现网页上两个 `div` 在 PC 端左右显示，移动端自动变成上下显示，可以通过使用 CSS 的媒体查询（Media Query）来实现。以下是一个示例代码： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .div1 { background-color: lightblue; width: 50%; float: left; } .div2 { background-color: lightcoral; width: 50%; float: right; } @media (max-width: 768px) { .div1, .div2 { width: 100%; float: none; } } </style> </head> <body> <div class="div1"> <p>这是第一个 div 的内容。</p> </div> <div class="div2"> <p>这是第二个 div 的内容。</p> </div> </body> </html> ``` 在上述代码中，首先为两个 `div` 设置了在 PC 端左右浮动各占 50%宽度的样式。然后通过媒体查询，当屏幕宽度最大为 768px（通常可视为移动端的常见宽度）时，将两个 `div` 的宽度设置为 100%，并取消浮动，使其自动上下排列。 ######[AI写代码神器 | 333点数解答 | 2024-07-31 09:41:32]

服务商

更多选项

快捷项

自定义

巧用 CSS 媒体查询：实现网页两 div 在 PC 端左右、移动端上下显示