简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  div linkes und rechtes Layout

div linkes und rechtes Layout

高洛峰
高洛峰Original
2016-11-23 17:35:124615Durchsuche

<!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>

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>


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Zusammenfassung der neuen Funktionen von CSS3: Rahmen und HintergründeNächster Artikel：Zusammenfassung der neuen Funktionen von CSS3: Rahmen und Hintergründe

In Verbindung stehende Artikel

Mehr sehen