2016-03-18 10 views
-3

Ich habe einige Blöcke in einem Container, aber mit einer bestimmten Situation nicht funktionieren.Seltsames Verhalten mit CSS-Eigenschaft Float

Folgen Sie den screenshort:

wrong way

die blaue Linie der Anfangspunkt von BLOCK B sein muss, aber der Block von rechts geht es nach unten. Warum?

codepen: http://codepen.io/faeldix/pen/MyJNXR

ps - mein Englisch

nicht gut
+0

Fragen, die Code-Hilfe suchen, müssen den kürzesten Code enthalten, der für die Reproduktion ** in der Frage selbst erforderlich ist **. Obwohl Sie einen [** Link zu einem Beispiel **] angegeben haben (http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can- Wenn die Verknüpfung ungültig werden würde, wäre Ihre Frage für andere zukünftige SO-Benutzer mit demselben Problem nicht von Bedeutung. –

+0

Ihr Stift scheint diese Situation nicht zu reflektieren. Beachten Sie auch, dass Sie Code in die Frage selbst einbetten können. Runnable Code in der Tat, wenn Ihre Frage über HTML/CSS/JS ist. – GolezTrol

+0

Ihre Frage erfüllt die [Anforderungen einer guten Frage] (http://stackoverflow.com/help/how-to-ask) nicht, aber Ihre Antwort ist überraschend Ihre CSS-Regel '.row {width: 100%; Höhe: 1px; } Können Sie sich vorstellen, was hier falsch ist? – nemoinho

Antwort

0

Dies geschieht wahrscheinlich, weil floats die Art und Weise Sie nicht, was arbeiten sie tun.

Lesen Sie mehr über sie auf MDN

Ich vermute, dass für das, was Sie suchen position:absolute ist.

Entfernen Sie Ihre float:left aus der .event und fügen Sie stattdessen position:absolute hinzu. Natürlich überlappen sich dann deine Elemente.

Eine andere Lösung ist position:relative-.row hinzuzufügen und zu verwenden float:left zum ungerade (diejenigen, die bleiben sollten) .event und float:right zum sogar (diejenigen, die richtig sein sollte) .event.