it-swarm.com.de

Wie positioniere ich drei Divs in HTML horizontal?

Ich erstelle eine Beispielwebsite, die horizontal drei Abteilungen hat. Ich möchte, dass der ganz linke Teil 25% breit, der mittlere 50% breit und der rechte Teil 25% breit ist, damit die Teilungen den gesamten 100% -Raum horizontal ausfüllen.

<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/j4cJ

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

Wie kann ich das machen?

49
Akhil

Ich würde es unterlassen, Schwimmer für solche Dinge zu verwenden. Ich würde lieber inline-block.

Einige weitere Punkte zu beachten:

  • Inline-Stile sind für die Wartbarkeit schlecht
  • Sie sollten keine Leerzeichen in Selektornamen haben
  • Sie haben einige wichtige HTML-Tags verpasst, z. B. <head> und <body>
  • Sie haben kein doctype angegeben.

So formatieren Sie Ihr Dokument besser:

<!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 ein gutes Maß.

33
Jezen Thomas

Ich weiß, das ist eine sehr alte Frage. Posten Sie dies einfach hier, während ich dieses Problem mit 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>

Musste nur hinzufügen display:flex zum Container! Keine Schwimmer erforderlich.

21
Maaz Syed Adeeb

Sie können schwebende Elemente wie folgt verwenden:

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

Beachten Sie den -Überlauf: hidden; im übergeordneten Container, um das übergeordnete Element so zu vergrößern, dass es die gleichen Abmessungen wie die untergeordneten Elemente aufweist (andernfalls hat es die gleichen Abmessungen) eine Höhe von 0).

11

Einfachster Weg
Ich kann sehen, dass die Frage beantwortet ist. Ich gebe diese Antwort für diejenigen, die diese Frage in Zukunft haben


Es ist nicht empfehlenswert, Inline-CSS zu codieren, und auch [~ # ~] id [~ # ~] für alle inneren Divs, versuchen Sie immer, Klasse für das Stylen. Die Verwendung von Inline-CSS ist eine sehr schlechte Praxis, wenn Sie versuchen, ein professioneller Webdesigner zu sein.

hier in Ihrer Frage habe ich eine Wrapper-Klasse für das übergeordnete Div angegeben, und alle inneren Divs sind untergeordnete Divs in CSS. Sie können innere Divs mit nth-child aufrufen. ) Selektor.

Ich möchte hier auf einige Dinge hinweisen

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

2 - Versuchen Sie, Klassen anstelle von IDs zu verwenden. Wenn Sie eine ID angeben, können Sie diese nur einmal verwenden. Wenn Sie jedoch eine Klasse verwenden, können Sie sie mehrmals verwenden und sie mit dieser Klasse formatieren, sodass Sie weniger Code schreiben.


codepen link für 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; 
            }</ code>
 
    <div class="wrapper">
        <div class="box">
        Left Side Menu
        </div>
        <div class="box">
        Random Content
        </div>
        <div class="box">
        Right Side Menu
        </div>
    </div>

10
Faizal Munna

Sie fügen ein

float: left;

auf den Stil der 3 Elemente und stellen Sie sicher, dass der übergeordnete Container hat

overflow: hidden; position: relative;

dadurch wird sichergestellt, dass die Schwimmer tatsächlich Platz beanspruchen.

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

Beachten Sie auch, dass die Breite: 100% und die Höhe: 100% aus dem Container entfernt werden müssen, da sonst der 3. Block in eine 2. Zeile übergeht.

5
NKCSS

Loswerden position:relative; und ersetze es 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>​
1
MNilson