Responsives Layout mit DIV-Prozentsätzen

Ich habe angefangen, an einem neuen PHP-basierten Chat-System für eines meiner Projekte zu arbeiten und vor kurzem habe ich viel Zeit mit dem Lesen von Responsive-Layouts verbracht Ich vermeide es, Bootstrap zu benutzen, auch wenn es viele großartige Funktionen bietet, und ich denke, dass es mehr zu lernen gibt, wenn man Dinge von Grund auf erledigt, indem man einen bereits etablierten Code verwendet ... das soll gesagt werden.Responsives Layout mit DIV-Prozentsätzen

Hier ist ein Beispielcode, den ich zusammengestellt habe, der sich nicht so verhält, wie ich es erwartet habe.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Chat Room </title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0l; maximum-scale=1.0; user-scalable=0;" > 

<style type="text/css"> 
#container 
    { 
    position:relative; 
    width:90%; 
    height:600px; 
    margin: 0 auto; 
    border: 1px solid red; 
    } 

#messages 
    { 
    width:75%; 
    margin:5px; 
    padding:10px; 
    height:80%; 
    border: 1px solid blue; 
    float: left; 
    } 

#users 
    { 
    width:21%; 
    margin:5px; 
    padding:10px; 
    height:80%; 
    border: 1px solid green; 
    float: left; 
    } 

#message_entry 
    { 
    width:100%; 
    margin:5px; 
    padding:10px; 
    height:20%; 
    border: 1px solid green; 
    clear: left; 
    }  
</style> 
</head> 
    <body width="device-width"> 

<div id="container"> 
    <div id="messages"> 
     Existing Messages 
    </div> 

    <div id="users"> 
     User List 
    </div> 

    <div id="message_entry"> 
     New Message Box 
    </div>   
</div> 
</body> 
</html>

bemerkte ich, dass die zu inneren DIV zugewiesenen Prozentsätze scheinen nicht wie im Fall von „message_entry“ an dem Behälter an ihre Mutter div zu beziehen.

Alle Gedanken würden sehr geschätzt werden.

Quelle

2016-07-20 Eduard Florea

Was macht es nicht wie erwartet? Sie haben noch nicht wirklich eine Frage gestellt. – TheValyreanGroup

Obwohl es lobenswert ist, selbst zu lernen, würde ich sagen, dass es absolut empfehlenswert ist, sich auf die Bootstrap-Dokumente zu beziehen, um ihre Herangehensweise zu verstehen, da sie jetzt wohl der Maßstab für solides responsives Layout sind. Zum Beispiel wird das Setzen von '' immer nur zu Problemen führen, da Sie die 'device-width' in einem Meta-Tag bereits korrekt einstellen. – Toby

herausnehmen '' Sie haben das Meta-Tag ' mlegg

#container 
 
    { 
 
    position:relative; 
 
    width:100%; 
 
    height:600px; 
 
    margin: 0 auto; 
 
    border: 1px solid red; 
 
\t float:left; 
 
    box-sizing: border-box; 
 
    } 
 

 
#messages 
 
    { 
 
    width:71% ; 
 
    margin:2%; /* <=== ^^^ 1 horizontal margin (left) of 2% */ 
 
    padding:3%; 
 
    height:75%; 
 
    border: 1px solid blue; 
 
    float: left; 
 
    box-sizing: border-box; /* all the width (padding + borders) and height (padding + borders) whitout the margins */ 
 
    } 
 

 
#users 
 
    { 
 
    width:21% ; 
 
    margin:2%;/* <=== ^^^ 1 horizontal margin of (right)2% */ 
 
    padding:3%; 
 
    height:75%; 
 
    border: 1px solid green; 
 
    float: left; 
 
    box-sizing: border-box; 
 
    } 
 

 
#message_entry 
 
    { 
 
    width:96%; /* 100% - (2% * 2) <=== ^^^ 2 horizontal margins of 2% */ 
 
    margin:2%; /* ■ ■ ■ */ 
 
    padding:3%; 
 
    height:19%; /* 25% - (2% * 3 ) <=== ^^^ 2 vertical + 1 ■ ■ ■ vertical margin */ 
 
    border: 1px solid green; 
 
    float:left; 
 
    box-sizing: border-box; 
 
    }

<body > 
 

 
<div id="container"> 
 
    <div id="messages"> 
 
     Existing Messages 
 
    </div> 
 

 
    <div id="users"> 
 
     User List 
 
    </div> 
 

 
    <div id="message_entry"> 
 
     New Message Box 
 
    </div>   
 
</div> 
 
</body>

Sie müssen alle in Prozentsätzen arbeiten und die Margen in der gesamten Breite zu betrachten.

Zum Beispiel: in 'Nachrichten' wird die Gesamtbreite 75% sein, weil wir 71% Breite plus zwei Ränder (Links und rechts) von 2% haben, ... in 'Benutzern' wird die Gesamtbreite gehen 25% sein, weil wir Breite haben: 21% plus 2 Ränder von 2% (links und rechts) ... Gesamtsumme = 100%.

In Bezug auf 'message_entry': Wir brauchen, dass die gleiche Breite wie 'Benutzer' + 'Nachrichten' nimmt.

"Benutzer" hat zwei horizontale Ränder (links und rechts), und die gleichen "Nachrichten"; aber die einzigen, die uns betreffen, sind die "Benutzer" links und die "Nachrichten" richtig; 'Benutzer' rechts und 'Nachricht' links nicht, weil 'message_entry' sie auch hat. Das ist der Grund, warum "Nachricht" eine Breite von 96% hat.

Die gleiche Logik ist für die Höhe Parameter.

Hinweis: Verwenden Sie "Box-Sizing: border-box" und Sie werden nur besorgt über die Ränder.

Quelle

2016-07-20 23:30:43

Danke Omar, der Vorschlag bezüglich der Breitenberechnung war ein großartiges Stück Info, das war und es hat sehr geholfen ... Ich werde die "Box-Sizing: Border-Box" untersuchen; Eigenschaft auch, wenn ich das Layout habe, das ich suche, werde ich mein gewünschtes Ergebnis zurückgeben ... Danke noch einmal für die Info. –

Gern geschehen, mein Herr –

Responsives Layout mit DIV-Prozentsätzen

Antwort

Verwandte Themen