nicht angemeldet
Fragen zu float
0 0
0 0 Elementfluss
Fragen zu float
Der MartinHallo!
Hab jetzt schon eine Weile gegoogelt. Leider bin ich nicht fündig geworden. Ihr werdet mir aber sicherlich weiterhelfen können.
Ich will zwei div-Elemente nebeneinander ausrichten. Dazu verwende ich das (aufs wesentliche gekürzte) CSS
div#d1
{
width: 100px; height: 40px;
padding: 5px; margin: 5px;
border: 2px solid #0078FF;
float: left;
}
div#d2
{
width: 100px; height: 40px;
padding: 5px; margin: 5px;
border: 2px solid #0078FF;
}
Ich dachte eigentlich, dass dann das zweite div um das erste rechts herumfließt. Es überdeckt das erste aber. Gebe ich bei dem zweiten auch float: left; an funktioniert das wie gewünscht. Die div-Elemente liegen dann genau nebeneinander.
Soweit so gut. Allerdings verstehe ich es nicht. Kann mir das wer erklären?
Danke!
-
Hi,
Ich dachte eigentlich, dass dann das zweite div um das erste rechts herumfließt. Es überdeckt das erste aber. Gebe ich bei dem zweiten auch float: left; an funktioniert das wie gewünscht. Die div-Elemente liegen dann genau nebeneinander.
Soweit so gut. Allerdings verstehe ich es nicht. Kann mir das wer erklären?
float sorgt dafür, dass inline-Inhalte um etwas herumfliessen.
Block-Elemente, in denen sich dieser Inhalt befinden, gehen nach wie vor über die volle Breite.MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
float sorgt dafür, dass inline-Inhalte um etwas herumfliessen.
Block-Elemente, in denen sich dieser Inhalt befinden, gehen nach wie vor über die volle Breite.Alles klar. Darum funktioniert es mit einem <p> schon und mit einem <div> nicht.
Thx!-
Hallo,
float sorgt dafür, dass inline-Inhalte um etwas herumfliessen.
Block-Elemente, in denen sich dieser Inhalt befinden, gehen nach wie vor über die volle Breite.
Alles klar. Darum funktioniert es mit einem <p> schon und mit einem <div> nicht.äh, nein. Sowohl div als auch p sind Blockelemente, die sich in dieser Sache gleich verhalten. Wenn du einen Unterschied zwischen den beiden beobachtest, muss das noch andere Gründe haben. Vermutlich Regeln in deinem CSS, die nur für div oder nur für p gelten.
Ciao,
Martin--
Denken ist wohl die schwerste Arbeit, die es gibt. Deshalb beschäftigen sich auch nur wenige damit.
(Henry Ford, amerikanischer Industriepionier)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Alles klar. Darum funktioniert es mit einem <p> schon und mit einem <div> nicht.
äh, nein. Sowohl div als auch p sind Blockelemente, die sich in dieser Sache gleich verhalten. Wenn du einen Unterschied zwischen den beiden beobachtest, muss das noch andere Gründe haben. Vermutlich Regeln in deinem CSS, die nur für div oder nur für p gelten.
Äh, ja. Meine Annahme war natürlich ein Blödsinn. Danke für den Hinweis und Grüße.
-
-
-
-
Ich will zwei div-Elemente nebeneinander ausrichten.
Ich dachte eigentlich, dass dann das zweite div um das erste rechts herumfließt. Es überdeckt das erste aber.Es überdeckt es? Wie sieht denn Dein html Markup aus?
Cheers,
Baba-
Ich will zwei div-Elemente nebeneinander ausrichten.
Ich dachte eigentlich, dass dann das zweite div um das erste rechts herumfließt. Es überdeckt das erste aber.Es überdeckt es? Wie sieht denn Dein html Markup aus?
Cheers,
BabaHi!
Folgendes Beispiel.
<head> <style> div#d1 { width: 100px; height: 40px; padding: 5px; margin: 5px; border: 2px solid #0078FF; float: left; } div#d2 { width: 100px; height: 40px; padding: 5px; margin: 5px; border: 2px solid #0078FF; } </style> </head> <body> <div id='d1'> </div> <div id='d2'> </div> </body>Ich könnte natürlich auch mit position: absolute oder relative arbeiten. Dachte aber mit float wäre es der bessere Weg. Vielleicht aber auch nicht. Wie gesagt. Wenn ich beim zweiten div auch float: left dazu schreibe funktioniert es wie gewüscht. Allerdings weiß ich nicht ob das so gut ist.
Grüße!
-
Ich könnte natürlich auch mit position: absolute oder relative arbeiten. Dachte aber mit float wäre es der bessere Weg.
Mit
position:absolutenicht. Ein zweitesfloat:leftist gut. Nicht vergessen ein Element mit clear:left anzufügen, wenn Du den Fluss anschliessend unterbrechen möchtest.
Oder aberdisplay:inline-block. Beispiel. Nicht vergessen, das zu lesen.Cheers,
Baba
-
-
-
Hallo!
Hab jetzt schon eine Weile gegoogelt. Leider bin ich nicht fündig geworden.
Ich dachte eigentlich, dass dann das zweite div um das erste rechts herumfließt. Es überdeckt das erste aber. Gebe ich bei dem zweiten auch float: left; an funktioniert das wie gewünscht. Die div-Elemente liegen dann genau nebeneinander.
Soweit so gut. Allerdings verstehe ich es nicht. Kann mir das wer erklären?
Siehe: http://jendryschik.de/wsdev/einfuehrung/eigenschaften/ausrichtung-und-elementfluss#float
Der sog. "Elementfluss" gehört zu den grundlegendsten Konzepten von CSS, die man unbedingt verstehen sollte. ;-)
Gruß Gunther