it-swarm.com.de

CSS: Platzieren von Divs links/zentriert/rechts in der Kopfzeile

Ich habe versucht, eine Site mit der folgenden Struktur zu erstellen:
gewünschte Struktur http://i50.tinypic.com/vhw076.png

Aber ich scheine den Kopf nicht richtig zu bekommen (e1 links, e2 zentriert, e3 rechts). Ich möchte, dass die drei Elemente e1, e2 und e3 links, mittig und rechts positioniert sind. Das versuche ich: 

<div id="wrapper">
<div id="header">
    <div id="header-e1">
        1
    </div>
    <div id="header-e2">
        2
    </div>
    <div id="header-e3">
        3
    </div>
</div>
<div id="nav">
    links
</div>
<div id="content">
    content
</div>
<div id="footer">
    footer
</div>
</div>

Mit dieser css: 

#wrapper
{
    width: 95%;
    margin: 20px auto;
    border: 1px solid black;
}

#header
{
    margin: 5px;
}
#header-e1
{
    float: left;
    border: 1px solid black;
}
#header-e2
{
    float: left;
    border: 1px solid black;
}
#header-e3
{

    border: 1px solid black;
}

#nav
{
    margin: 5px;
}
#content
{
    margin: 5px;
}
#footer
{
    margin: 5px;
}

Kann mir jemand Tipps geben, was ich tun kann? Die Struktur wird auf einer mobilen Website verwendet.

AKTUALISIEREN

Der Code, den ich oben habe, gibt mir folgendes: aktuelles Ergebnis http://i46.tinypic.com/2mg87ya.png Aber ich möchte, dass die 2 zentriert und die 3 auf der rechten Seite ist. Ich möchte die Breite nicht auf ein Prozent setzen, da der Inhalt in den Elementen variieren kann, dh es kann 20/60/20 - 10/80/10 - 33/33/33 oder etwas anderes sein.

20
L42

Nutze die Magie des Überlaufs: Versteckt

Wenn Sie die HTML-Position von 2 & 3 wie folgt austauschen können:

<div id="header-e1">
    1 is wider
</div>
<div id="header-e3">
    3 is also
</div>
<div id="header-e2">
    2 conforms
</div>

Dann können Sie dieses CSS setzen, das 2 den verfügbaren Platz "ausfüllt" aufgrund des overlow: hidden darauf. Also wenn 1 und 3 expandieren, 2 verengt sich (verkleinern Sie das Fenster, um zu sehen, was bei einer wirklich kleinen Größe passiert).

#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}

Technisch gesehen könnten Sie Ihre aktuelle HTML-Reihenfolge und Ihren float: left sowohl auf 1 & 2 als auch auf machen Sie 3 zum Flex-Div mit overflow: hidden. Sie könnte dasselbe mit 1 tun , indem Sie die Reihenfolge der HTML-Datei vollständig umkehren und 2 & 3 auf float: right setzen, wobei 1 overflow: hidden hat. Mir scheint es am besten, den mittleren Flex zu haben, aber Sie kennen Ihre Anwendung besser als ich.

22
ScottS

Wenn Sie versuchen, die Site mit einer responsiven Breite zu erstellen, können Sie Folgendes versuchen (33% sind ungefähr ein Drittel):

#header-e1 {
    float: left;
    width:33%;
    border: 1px solid black;
}

#header-e2 {
    float: left;
    width:33%;
    border: 1px solid black;
}

#header-e3 {
    float: left;
    width:33%;
    border: 1px solid black;
}

Sie können auch feste Breiten für die Divs verwenden. Wenn Sie weiter voneinander entfernt sein möchten, können Sie mit den linken/rechten Rändern usw. spielen. Hoffe, das hilft!

Hier ist eine Bearbeitung für keine Breiten:

#wrapper {
    position:relative; (add to wrapper)
}

#header-e1 {
    position:absolute;
    left:0;
    border:1px solid black;
}

#header-e2 {
    position:absolute;
    left:50%;
    border:1px solid black;
}

#header-e3 {
    position:absolute;
    right:0;
    border: 1px solid black;
}
4
RevConcept

Sie müssen den divs in Ihrem Header eine Breite zuweisen und float header-e3 nach links.

Hinweis: Sie haben alle die gleichen CSS-Eigenschaften. Geben Sie ihnen also dieselbe Klasse wie .headerDivs, und Sie haben keinen sich wiederholenden Code

Edit: hier ist eine funktionierende jsfiddle: http://jsfiddle.net/eNDPG/

1
Andy

Sie können so etwas tun:

HTML

<div>
    <div id="left">Left</div>
    <div id="right">Right</div>
    <div id="center">Center</div>
</div>

CSS

#left {
  float: left;
  border: 1px solid red;
}

#right {
  float: right;
  border: 1px solid blue;
}

#center {
  margin-left: 50px;
  margin-right: 50px;
  border: 1px solid green;
  text-align: center;
}

Der zentrierte <div> muss der letzte im HTML-Code sein.

Hier ist ein JS-Bin zum Testen: http://jsbin.com/evagat/2/edit

0
                    <style type="text/css">
                    body {
                    margin:0;
                    }
                    #header {
                    width:100%;
                    **strong text**margin:auto;
                    height:10%;
                    background-color:red;
                    }
                    #left {
                    width:20%;
                    float:left;
                    #margin:auto auto auto auto;
                    height:100%;
                    background-color:blue;
                    }
                    #right {
                    float:right;
                    width:20%;
                    #margin:auto auto auto auto;
                    height:100%;
                    background-color:green;
                    }
                    #middle {
                    position:relative;
                    left:0;
                    right:0;
                    margin:auto;
                    height:80%;
                    background-color:yellow;
                    width:100%;
                    }
                    #middle1 {
                    width: 80%;
                    margin:auto;
                    height:45%;
                    background-color:black;
                    }
                    #middle2 {
                    width: 80%;
                    margin:auto;
                    height:40%;
                    background-color:brown;
                    }
                    #middle3 {
                    width: 80%;
                    margin:auto;
                    height:15%;
                    background-color:orange;
                    }
                    #midmain {
                    width: auto;
                    margin:auto;
                    height:100%;
                    background-color:white;
                    }
                    #footer {
                    width:100%;
                    margin:auto;
                    height:10%;
                    background-color:red;
                    }
                    </style>

Überprüfen Sie jetzt den Kommentar für HTML-Design.

0
P P

Ich verwende eine ähnliche Idee wie RevCocnept mit width: 33%, außer mit display: inline-block anstelle von float: left. Dadurch wird vermieden, dass die div-Elemente in #header aus dem Seitenfluss entfernt werden und die Höhe von #header zu Null wird.

#header > div {
    display: inline-block;
    width: 31%;
    margin: 5px 1%;
}

Demo

0
Zhihao