<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><!--左侧--><div><buttontype="button"onclick="javascript:alert('test')">右侧按钮1</button></div><!--右侧--><div><div></div></div></body></html>

该方式可以正常实现左右布局,但存在一个问题:由于采用浮动叠加方式,导致左侧div中的button无法点击。

解决办法:浮动元素添加position属性(如relative,absolute等)

<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><!--左侧--><div><buttontype="button"onclick="javascript:alert('test')">右侧按钮1</button></div><!--右侧--><div><div></div></div></body></html>