酷代码 AI
菜单
全部AI  /  热门  /  AI写代码神器
服务商

网页上两个div,如何让两个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%,并取消浮动,使其自动上下排列。 [2024-07-31 09:41:32 | AI写代码神器 | 333点数解答]

相关提问