Wie positioniert man drei divs in html horizontal?

Ich erstelle eine Beispiel-Website, die horizontal drei Bereiche hat. Ich möchte die linke div zu 25% Breite, die mittlere zu 50% Breite und rechts zu 25% Breite sein, so dass die Divisionen alle 100% Platz horizontal ausfüllen.Wie positioniert man drei divs in html horizontal?

<html> 
    <title> 
    Website Title 
    </title> 

    <div id="the whole thing" style="height:100%; width:100%" > 

     <div id="leftThing" style="position: relative; width:25%; background-color:blue;"> 
      Left Side Menu 
     </div> 

     <div id="content" style="position: relative; width:50%; background-color:green;"> 
      Random Content 
     </div> 

     <div id="rightThing" style="position: relative; width:25%; background-color:yellow;"> 
      Right Side Menu 
     </div> 

    </div> 
</html>

http://imgur.com/j4cJu

Wenn ich diesen Code ausführen, werden die divs übereinander. Ich möchte, dass sie nebeneinander erscheinen!

Wie kann ich das tun?

Quelle

2012-08-13 Akhil

Geben Sie die linke den Stil div "float: left" und das rechte div „float :Recht". –

Lass sie nach links schweben, sie werden aufeinander gestapelt. Allerdings bin ich mir nicht sicher, ob die% -Breite noch angewendet wird, du solltest das ausprobieren. – Terry

@ user1594853 Wenn eine Antwort Ihnen geholfen hat, markieren Sie sie bitte als akzeptiert. –

können Sie floating elements verwenden wie so:

<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;"> 
    <div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div> 
    <div id="content" style="float: left; width:50%; background-color:green;">Random Content</div> 
    <div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div> 
</div>

Notiere die overflow: hidden; für den übergeordneten Container, damit der Parent so vergrößert wird, dass er die gleichen Dimensionen wie die untergeordneten Elemente aufweist (andernfalls wird er die Höhe 0 haben).

Quelle

2012-08-13 09:09:22

Während Float korrekt ist, würde ich nicht ein "HTML newb "um die Verwendung von Inline-CSS zu beginnen. Edit: bemerkte nun, dass er bereits Inline-CSS verwendet, trotzdem würde ich eine bessere Lösung vorschlagen. – powerbuoy

@powerbuoy stimmte zu, Inline-CSS wird NICHT empfohlen. Dies würde aus einer eingeschlossenen CSS-Datei erfolgen, in der die Stile über die ID (#leftThing {float: left;}), den Selektor oder den Klassennamen gebunden sind. –

Sie einen

float: left;

, um den Stil der drei Elemente und stellen Sie sicher,

overflow: hidden; position: relative;

dies stellt sicher, dass die Schwimmer nehmen tatsächlichen Raum fügen Sie den übergeordneten Container hat.

<html> 
    <head> 
     <title>Website Title </title> 
    </head> 
    <body> 
     <div id="the-whole-thing" style="position: relative; overflow: hidden;"> 
      <div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;"> 
       Left Side Menu 
      </div> 
      <div id="content" style="position: relative; width: 50%; background-color: green; float: left;"> 
       Random Content 
      </div> 
      <div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;"> 
       Right Side Menu 
      </div> 
     </div> 
    </body> 
</html>

Bitte beachten Sie auch, dass die Breite: 100% und height: 100% muß aus dem Behälter entfernt werden, da sonst der dritte Block auf eine zweite Zeile umgebrochen wird.

Quelle

2012-08-13 09:12:28 NKCSS

Entfernen Sie die position:relative; und ersetzen Sie sie durch float:left; und float:right;.

Beispiel in jsfiddle: http://jsfiddle.net/d9fHP/1/

 <html> 
<title> 
Website Title </title> 
<div id="the whole thing" style="float:left; height:100%; width:100%"> 
    <div id="leftThing" style="float:left; width:25%; background-color:blue;"> 
     Left Side Menu 
    </div> 
    <div id="content" style="float:left; width:50%; background-color:green;"> 
     Random Content 
    </div> 
    <div id="rightThing" style="float:right; width:25%; background-color:yellow;"> 
     Right Side Menu 
    </div> 
</div> 
</html>

Quelle

2012-08-13 09:12:47 MNilson

ich mit Schwimmern für diese Art der Sache verzichten würde; Ich würde lieber inline-block verwenden.

Einige weitere Punkte zu beachten:

Inline-Styles für Wartbarkeit
schlecht sind, sollten Sie keine Leerzeichen in Selektornamen haben
Sie einige wichtige HTML-Tags verpasst, wie <head> und <body>
Sie haben keine doctype

Hier ist ein besserer Weg, um das Dokument zu formatieren:

<!DOCTYPE html> 
<html> 
<head> 
<title>Website Title</title> 
<style type="text/css"> 
* {margin: 0; padding: 0;} 
#container {height: 100%; width:100%; font-size: 0;} 
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;} 
#left {width: 25%; background: blue;} 
#middle {width: 50%; background: green;} 
#right {width: 25%; background: yellow;} 
</style> 
</head> 
<body> 
<div id="container"> 
    <div id="left">Left Side Menu</div> 
    <div id="middle">Random Content</div> 
    <div id="right">Right Side Menu</div> 
</div> 
</body> 
</html>

Hier ist ein jsFiddle für eine gute Maßnahme.

Quelle

2012-08-13 09:21:06

Schön, dass Sie vorschlagen, von Inline-CSS zu wechseln. Darf ich auch darauf hinweisen, dass "left", "middle" und "right" _really_ bad IDs (oder Klassennamen) sind, da sie sich direkt auf ihr Layout und nicht auf ihre Bedeutung beziehen. Außerdem würde ich "Inline-Block" nicht für "float" empfehlen.Ein 'Inline-Block'-Element wird von' Letter-Spacing' und 'Font-Size' (etc) beeinflusst, was es schwieriger macht, es zu verbinden (eine Lösung setzt' font-size: 0' auf '# container' und dann setze es in '#container *' auf normal zurück. – powerbuoy

Ja, das ist völlig richtig. –

"Sie haben einige wichtige HTML-Tags verpasst, wie und " Technisch nichts falsches mit diesen Tagen ...: https://html.spec.whatwg.org/multipage/syntax.html#optional-tags – roundar

Ich weiß, das ist eine sehr alte Frage. Ich poste dieses hier, während ich dieses Problem unter Verwendung FlexBox löste.Hier ist die Lösung

#container { 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
} 
 
#leftThing { 
 
    width: 25%; 
 
    background-color: blue; 
 
} 
 
#content { 
 
    width: 50%; 
 
    background-color: green; 
 
} 
 
#rightThing { 
 
    width: 25%; 
 
    background-color: yellow; 
 
}

<div id="container"> 
 

 
    <div id="leftThing"> 
 
    Left Side Menu 
 
    </div> 
 

 
    <div id="content"> 
 
    Random Content 
 
    </div> 
 

 
    <div id="rightThing"> 
 
    Right Side Menu 
 
    </div> 
 

 
</div>

Gerade hatte display:flex zum Container hinzuzufügen! Keine Schwimmer erforderlich.

Quelle

2016-10-24 03:07:22

meisten einfachste Weg
kann ich sehen, die Frage beantwortet wird, gebe ich diese Antwort für diejenigen, die in Zukunft

diese Frage ist mit

Es ist keine gute Praxis, Inline-CSS zu codieren, und auch ID für alle inneren divs, versuchen Sie immer Klasse für Styling zu verwenden. Inline-CSS zu verwenden ist eine sehr schlechte Übung, wenn Sie versuchen, ein professioneller Webdesigner zu sein.

hier in Frage Ich habe eine Wrapper-Klasse für die div Eltern gegeben und alle innerhalb divs sind Kind divs in CSS können Sie innere div nennen mit n-te-Kind Wähler.

möchte ich hier einige Dinge zeigen

1 - Verwenden Sie Inline-CSS nicht (es ist sehr schlechte Praxis)

2 - Versuchen Sie Klassen zu verwenden anstelle von IDs, denn wenn man eine ID geben Sie benutze es nur einmal, aber wenn du eine Klasse benutzt, kannst du sie mehrmals benutzen und du kannst sie auch mit dieser Klasse stylen, damit du weniger Code schreibst.

codepen Link auf meine Antwort

https://codepen.io/feizel/pen/JELGyB


             
   
    
      .wrapper{width:100%;} 
 
      .box{float:left; height:100px;} 
 
      .box:nth-child(1){ 
 
       width:25%; 
 
       background-color:red; 
 
     
 
      } 
 
      .box:nth-child(2){ 
 
       width:50%; 
 
       background-color:green; 
 
      } 
 
      .box:nth-child(3){ 
 
       width:25%; 
 
       background-color:yellow; 
 
      } 
    
 
    <div class="wrapper"> 
 
     <div class="box"> 
 
     Left Side Menu 
 
     </div> 
 
     <div class="box"> 
 
     Random Content 
 
     </div> 
 
     <div class="box"> 
 
     Right Side Menu 
 
     </div> 
 
    </div>

Quelle

2017-02-01 17:21:37

Wie positioniert man drei divs in html horizontal?

Antwort

Verwandte Themen