<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 左側 --> <div style="width: 240px;float:left;height: 300px;background:#666; "> <button type="button" onclick="javascript:alert('test')">右側按鈕1</button> </div> <!-- 右側 --> <div style="width:100%;float:right; margin-left:-250px;"> <div style="margin-left:250px; height:300px;background:#666;"> </div> </div> </body></html>
該方式可以正常實現左右布局，但存在一個問題：由於採用浮動疊加方式，導致左側div中的button無法點擊。
解決辦法：浮動元素添加position屬性（如relative，absolute等）
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 左側 --> <div style="width: 240px;float:left;height: 300px;background:#666; position: relative;"> <button type="button" onclick="javascript:alert('test')">右側按鈕1</button> </div> <!-- 右側 --> <div style="width:100%;float:right; margin-left:-250px;"> <div style="margin-left:250px; height:300px;background:#666;"> </div> </div> </body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
