div左右布局 - 技术教程

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- 左侧 -->
        <p style="width: 240px;float:left;height: 300px;background:#666; ">
            <button type="button" onclick="javascript:alert('test')">右侧按钮1</button>
        </p>
         
        <!-- 右侧 -->
        <p style="width:100%;float:right; margin-left:-250px;">
            <p style="margin-left:250px; height:300px;background:#666;">
            </p>
        </p>
    </body>
</html>

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

解决办法：浮动元素添加position属性（如relative，absolute等）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!-- 左侧 -->
        <p style="width: 240px;float:left;height: 300px;background:#666; position: relative;">
            <button type="button" onclick="javascript:alert('test')">右侧按钮1</button>
        </p>
         
        <!-- 右侧 -->
        <p style="width:100%;float:right; margin-left:-250px;">
            <p style="margin-left:250px; height:300px;background:#666;">
            </p>
        </p>
    </body>
</html>

相关文章：

你感兴趣的文章：

标签云：