div linkes und rechtes Layout-CSS-Tutorial-php.cn

div linkes und rechtes Layout

高洛峰

Freigeben： 2016-11-23 17:35:12

Original

4580 Leute haben es durchsucht

<!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(&#39;test&#39;)">右侧按钮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>

Nach dem Login kopieren

Diese Methode kann das linke und rechte Layout normal realisieren, es gibt jedoch ein Problem: Aufgrund der Floating-Overlay-Methode kann nicht auf die Schaltfläche im linken Div geklickt werden.

Lösung: Positionsattribute (wie relativ, absolut usw.) zu schwebenden Elementen hinzufügen

<!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(&#39;test&#39;)">右侧按钮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>

Nach dem Login kopieren