So entfernen Sie unerwünschte vertikale Abstände zwischen divs

Ich bin in ein bisschen ein Haken geraten, während ich das Frontend für eine Website entwickle. Ich bin kompetent mit CSS, aber nicht fantastisch. Wie auch immer, ich habe eine jsFiddle here erstellt, die mein Problem veranschaulicht.So entfernen Sie unerwünschte vertikale Abstände zwischen divs

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 in der Mockup gezeigt mein Designer gab mir: https://www.dropbox.com/s/d9opotyiyp0yc9o/menus.jpg)

Ich möchte dies in reinem CSS + HTML tun, ohne nur ein Bild Chuck in. Jedenfalls habe ich dies mit dem folgenden Code getan:

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg" style="width: 100%;"> 
<div> 
    <div style="width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%; height:10px; display: inline-block; background: #E5C697;"></div> 
</div>

(Bitte entschuldigen sie die Inline-CSS, es ist nur zu Demonstrationszwecken. auch leider wenn ich die zweite div auf eine neue Zeile setzen und einrücken es, erstellt es Leerzeichen)

Das Problem, das ich bin Das heißt, es gibt eine große Lücke zwischen dem Teiler und dem Bild. 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

Quelle

2013-07-21 Joshua Walsh

Verwenden clearfix Methode aus, Sie darüber suchen. –

Für mich ist es eine vertikale Ausrichtung Problem.Sie können versuchen

.banner { 
    display: block; 
    width: 100%; 
} 
div { 
    height: 10px; 
    vertical-align: top; 
}

Auf diese Weise müssen Sie keine negativen Margen (die nicht falsch sind, nur kontroverse Praxis).

bestellen here

Quelle

2013-07-21 06:02:27 Chad

Danke, ich habe versucht, vertikal auszurichten: oben; vorher, aber ich hatte das Banner nicht als Block angezeigt. Wie auch immer, ich wollte Floats nicht wirklich einbeziehen, da ich nicht das Gefühl hatte, dass sie notwendig waren, und ich vermied negative Margen, weil ich mir Gedanken darüber machte, wie es bei verschiedenen Bildschirmauflösungen aussehen würde. –

Sie die Position relativ machen und dann die oben auf etwas minus. ex:

position: relative; 
top:-10px; 
left:0px;

Quelle

2013-07-21 04:06:50 Daniel

dies tatsächlich schweben Problem

<img class="banner" src="http://regency.ymindustries.com/static/images/winelist.jpg"> 
<div style=""> 
    <div style="float:left;width:30%; height: 10px; display: inline-block; background: #6C210C"></div><div style="width:70%;float:left; height:10px; display: inline-block; background: #E5C697;"></div> 
</div>

css

.banner { 
    width:100%; 
float:left; 
}

http://jsfiddle.net/eLbUU/4/

Quelle

2013-07-21 04:07:15 Hushme

Zunächst einmal stellen die dunkleren braun in der helleren Braun div. Auf diese Weise kompromittieren Sie beim Größenanpassen des Fensters nicht den Größenprozentsatz und/oder den Abstand.

<div style="width:100%; height:10px; display: inline-block; background: #E5C697;"> <div style="width:30%; height: 10px; background: #6C210C;"></div></div>

Und mit dem Raum können Sie entweder negative Ränder oder Schwimmer verwenden, wie andere erwähnt haben.

.banner { 
    width:100%; 
    /* margin-bottom to the banner is negative which moves the div upward */ 
    margin-bottom: -10px; 
}

fiddle here

Quelle

2013-07-21 04:11:19 kmkmkm

Putting display: block; für die Bildklasse und float: links; für alle anderen Elemente können helfen.

.banner { 
    width:100%; 
    display:block; 
    float:left; 
}

http://jsfiddle.net/bjliu/eLbUU/7/ (Edit: Leider falscher Link)

Quelle

2013-07-21 04:20:33 bjliu

Anzeigeblock mit und die divs schwimmen, auch die img selbst Anzeigeblock mit Überlauf um sicherzustellen, ist verborgen ich in der Lage war, die Streifen auf den img zu straffen : fiddle

.banner { 
    width:100%; 
    display: block; 
    overflow: hidden; 
} 
div div{ 
    float: left; 
}

Quelle

2013-07-21 05:23:35

So entfernen Sie unerwünschte vertikale Abstände zwischen divs

Antwort

Verwandte Themen