Ich habe bei der Entwicklung des Frontends für eine Website einen kleinen Haken gefunden. Ich bin kompetent mit CSS, aber nicht fantastisch. Wie auch immer, ich habe hier ein jsFiddle erstellt , das mein Problem veranschaulicht.
Auf jeder Seite meiner Website, oben im Inhaltsbereich, habe ich ein Bannerbild. Ich möchte einen zweifarbigen Teiler platzieren, der dieses Banner vom Inhalt trennt. (Wie im Modell gezeigt, gab mir mein Designer: Ссылка )
Ich würde das gerne in reinem CSS + HTML machen, ohne ein Bild reinzulegen. Jedenfalls habe ich das mit dem folgenden Code gemacht:
%Vor%(Bitte vergib dem Inline-CSS, es dient nur zu Demonstrationszwecken. Wenn ich das zweite div auf einen Zeilenumbruch setze und es einrücke, erzeugt es leider Whitespace)
Das Problem, das ich habe, ist, dass es eine große Lücke zwischen dem Teiler und dem Bild gibt. Ich habe versucht, Rand zu addieren: 0px und padding: 0px zu allen relevanten Elementen, und der whitespace ist noch dort.
Könnte mir bitte jemand helfen?
Danke, YM
mit Display-Block und Floating der divs, auch um sicherzustellen, dass die img selbst ist Display-Block mit Überlauf versteckt Ich konnte die Streifen zu den img: Geige
%Vor%Zuerst das dunklere Braun in das hellbraune Div. Auf diese Weise kompromittieren Sie beim Größenanpassen des Fensters nicht den Größenprozentsatz und / oder den Abstand.
%Vor%Und mit dem Leerzeichen können Sie negative Ränder oder Floats verwenden, wie andere bereits erwähnt haben.
%Vor%Tags und Links css vertical-alignment
