nicht angemeldet
3 Divs in einer Zeile jeweils Linksbündig/Zentriert/Rechtsbündig
suit
UlyssesHallo,
ich habe 3 divs die ich gerne auf einer Zeile jeweils linksbündig, zentriert und rechtsbündig ausrichten möchte.
Versucht habe ich es mit folgendem:
<div>
<div style="float:left;">Left</div>
<div style="float:left;">
<div style="margin-left:auto; margin-right: auto;">Center</div>
</div>
<div style="float:right;">Right</div>
</div>
Jedoch wird das div welches zentriert werden sollte nicht zentriert, es ist linksbündig.
Vielen Dank vorab,
nils
-
<div style="width:300px; border:0px solid yellow;"> <div style="width:100px; border:0px solid red;float:left">Left</div> <div style="width:100px;border:0px solid black; float:left">Center</div> <div style="width:100px;border:0px solid green;float:right">Right</div> </div>Kansnt die Border löschen, dienen nur der besseren Ansicht.
-
Hallo Peter,
danke für die rasche Antwort. Ich glaube meine Fragestellung war etwas verwirrend und nicht ausführlich genug. Die divs sind nun korrekt platziert. Deren Inhalt (auch divs), jedoch, sollte ebenfalls links/zentriert/rechtsbündig sein, was so direkt noch nicht klappt.
Im Ganzen sieht das etwa so aus:
<div> <div style="width: 33%;float:left;"> <div style="width: 20px; float:left;">Btn</div> <div style="width: 20px; float:left;">Btn</div> <div style="width: 20px; float:left;">Btn</div> </div> <div style="width: 33%;float:left;"> <div style="width: 20px; ???">Btn</div> <div style="width: 20px; ???">Btn</div> <div style="width: 20px; ???">Btn</div> </div> <div style="width: 33%; float:right;">Right <div style="width: 20px; float:right;">Btn</div> <div style="width: 20px; float:right;">Btn</div> <div style="width: 20px; float:right;">Btn</div> </div> </div>Vielen Dank vorab,
Nils
-
Ok, sorry dann habe ich dich nicht richtig verstanden.
<div> <div style="width:33%; float:left; border:1px solid red;"> <div style="width:20px; float:left; border:1px solid green;">1</div> <div style="width:20px; float:left; border:1px solid yellow;">2</div> <div style="width:20px; float:left; border:1px solid purple;">3</div> </div> <div style="width:33%;float:left; border:1px solid red;" align="center"> <div style="width:33%"> <div style="width:20px;float:left; border:1px solid green;">4</div> <div style="width:20px;float:left; border:1px solid yellow;">5</div> <div style="width:20px;float:left; border:1px solid pruple;">6</div> </div> </div> <div style="width:33%; float:left; border:1px solid red;"> <div style="width:20px; float:right; border:1px solid green;">7</div> <div style="width:20px; float:right; border:1px solid yellow;">8</div> <div style="width:20px; float:right; border:1px solid purple;">9</div> </div> </div>Meinst du sowas?
-
Vielen Dank für die Antwort.
Diese Lösung gefällt mir nicht wirklich. Es sieht zentriert aus weil das "<div style="width:33%">" 33% der Breite des Bildschirms einnimmt was halt hinhaut um die 4,5,6 divs so unterzubringen dass nicht viel mehr reinpasst. Nur ist es nicht wirklich zentriert, und ich kann auch nicht die volle Breite des mittleren divs ausnutzen.
-
Diese Lösung gefällt mir nicht wirklich. Es sieht zentriert aus weil das "<div style="width:33%">" 33% der Breite des Bildschirms einnimmt was halt hinhaut um die 4,5,6 divs so unterzubringen dass nicht viel mehr reinpasst. Nur ist es nicht wirklich zentriert, und ich kann auch nicht die volle Breite des mittleren divs ausnutzen.
Dann gib den inneren Div, das die 4,5,6 beinhaltet die breite von 100%.
Du wolltest es zentriet haben, jetzt ist es, was nun? -
weil das "<div style="width:33%">" 33% der Breite des Bildschirms einnimmt
Auflösung != Desktopgrösse != Browserfenstergrösse != Anzeigebereich. [psf 3.7]
ungeachtet dessen ist die lösung ansich fürchterlich - um 9 durchnummeriere elemente so auszurichten, würde ich eine geordnete liste vorschlagen, die li-elemente floaten nacheinander und haben je eine 33%ige breite
aber ohne den semantischen sinn hinter diesem unterfangen zu kennen, sind weitere tipps ziemlich ins leere geschossen
-
ungeachtet dessen ist die lösung ansich fürchterlich - um 9 durchnummeriere elemente so auszurichten, würde ich eine geordnete liste vorschlagen, die li-elemente floaten nacheinander und haben je eine 33%ige breite
Ich würde es auch anders machen, aber da man den OP helfen will, ohne seite HTML Struktur zu kennen bzw. in Frage zu stellen, habe ich es so gemacht, und es funktioniert! Nicht die schönste Lösung, aber wie man weiß, führen viele Wege nach Rom.
-
Nicht die schönste Lösung, aber wie man weiß, führen viele Wege nach Rom.
ja, aber warum auf gut glück eine holprige straße über die alpen nehmen, wenn man doch bequem von der seeseite aus angreifen kann? [1]
[1] ich will jetzt nicht die taktik von hannibal in frage stellen, da hatte es durchaus sinn, mehrere jahre über die holprigen straße durch die alpen zu ziehen
-
-
ungeachtet dessen ist die lösung ansich fürchterlich - um 9 durchnummeriere elemente so auszurichten, würde ich eine geordnete liste vorschlagen, die li-elemente floaten nacheinander und haben je eine 33%ige breite
Hmm, mir ist nicht klar wie das gemeint ist. 3 lis mit den 20px divs drin? Dann ist der inhalt des mittleren lis auch nicht zentriert.
aber ohne den semantischen sinn hinter diesem unterfangen zu kennen, sind weitere tipps ziemlich ins leere geschossen
Es geht darum dass ich auf der mehrere tabellen habe (jede tabellen enhält datensätze..). Und über jeder tabelle steht eine toolbar. Und da hätte ich gerne dass einige buttons der toolbar links, einige rechts und die buttons, welche es erlauben durch die datensätze zu blättern zentriert stehen, etwa so:
<!-- [XY] [<<][<][>][>>] [ZA][BC] ################################### ################################### ################################### ################################### ################################### ################################### ################################### ################################### ################################### ################################### -->Das links-rechts geht ganz einfach mit float left und float right. Jedoch hätte ich gerne die [<<][<][>][>>] buttons zentriert, und das geht nicht.
-
Das links-rechts geht ganz einfach mit float left und float right. Jedoch hätte ich gerne die [<<][<][>][>>] buttons zentriert, und das geht nicht.
jetzt hab ich dich ;)
wie wärs mit einem innenabstand auf beiden seiten des zentrierten elements und einem negativen aussenabstand für die elemente links und rechts?
-
Das links-rechts geht ganz einfach mit float left und float right. Jedoch hätte ich gerne die [<<][<][>][>>] buttons zentriert, und das geht nicht.
jetzt hab ich dich ;)
wie wärs mit einem innenabstand auf beiden seiten des zentrierten elements und einem negativen aussenabstand für die elemente links und rechts?
Also das div welches diese "[<<][<][>][>>]" buttons enthält ist zentriert (weil alle drei eine breit von 33%haben), jedoch ist dieses div größer als der platz den die "[<<][<][>][>>]" buttons einnehmen, so dass die buttons etwas zu weit nach links stehen. So wie das hier:
<!-- [XY][DE] [<<][<][>][>>] [ZA][BC] ############################################################# ############################################################# ############################################################# ############################################################# ############################################################# ############################################################# ############################################################# ############################################################# ############################################################# ############################################################# -->oder noch deutlicher mit weniger links (wenn auf der ersten seite der datensätze)
<!-- [XY][DE] [>][>>] [ZA][BC] ############################################################# ############################################################# ############################################################# ############################################################# ############################################################# ############################################################# ############################################################# ############################################################# ############################################################# ############################################################# --> ~~~-
Also das div welches diese "[<<][<][>][>>]" buttons enthält ist zentriert (weil alle drei eine breit von 33%haben), jedoch ist dieses div größer als der platz den die "[<<][<][>][>>]" buttons einnehmen, so dass die buttons etwas zu weit nach links stehen. So wie das hier:
und was hat jetzt der inhalt eines elements damit zu tun, ob es selbst zentriert ist? ich kann dem nicht ganz folgen, die zentrierung des inhalts halt nichts mit der zentrierung des eigentlichen elements zu tun (ausnahme der ie6 im gewirks-mode :p
-
Also das div welches diese "[<<][<][>][>>]" buttons enthält ist zentriert (weil alle drei eine breit von 33%haben), jedoch ist dieses div größer als der platz den die "[<<][<][>][>>]" buttons einnehmen, so dass die buttons etwas zu weit nach links stehen. So wie das hier:
und was hat jetzt der inhalt eines elements damit zu tun, ob es selbst zentriert ist? ich kann dem nicht ganz folgen, die zentrierung des inhalts halt nichts mit der zentrierung des eigentlichen elements zu tun (ausnahme der ie6 im gewirks-mode :p
Sorry, das war nicht ganz klar.
Es geht ja darum dass am ende diese "[<<][<][>][>>]" buttons zentriert sein sollen (und die anderen links/rechts wie auf dem schema dargestellt). Wie das nun erreicht wird ist mir egal (solang es sauberes html/css ist).
Jedenfalls bin ich der einfachheit halber davon ausgegangen dass es 3 divs geben würde: jeweils eins für links, mitte und rechts. Das hatte ich ins erste posting geschrieben. Diese sind mittlerweile soweit korrekt plaziert. Doch deren inhalt muss ebenfalls links, mittig, und rechts ausgerichtet sein, sonst ist das endresultat ja nicht das erwartete. Vielleicht ist es auch garnicht richtig da zuerst 3 divs für links/mitte/rechts zu machen. Es geht darum dass es am ende aussieht wie auf dem schema dargestellt.
-
Hi!
Jedenfalls bin ich der einfachheit halber davon ausgegangen dass es 3 divs geben würde: jeweils eins für links, mitte und rechts. Das hatte ich ins erste posting geschrieben. Diese sind mittlerweile soweit korrekt plaziert. Doch deren inhalt muss ebenfalls links, mittig, und rechts ausgerichtet sein, sonst ist das endresultat ja nicht das erwartete. Vielleicht ist es auch garnicht richtig da zuerst 3 divs für links/mitte/rechts zu machen. Es geht darum dass es am ende aussieht wie auf dem schema dargestellt.
Das schaut für mich aus, als bräuchtest du nur ein einfaches 3-Spalten-Layout
divlinks mit float:left
divrechts mit float: right
und divmitte nimmt den verbleibenden Rest ein
die Inhalte (Bilder?) darin richtest du dann entsprechend mit text-align aus...LG Ulysses
-
-
-
-
-
-
-
-
-
-