Ich habe ein DIV mit einem Bild und ein zweites DIV. Das übergeordnete DIV ist auf position: absolute;
gesetzt, das untergeordnete DIV auf position: relative
. Die Idee ist, dass ich meine Bildunterschrift über meinem Bild anzeige.
Das untergeordnete DIV
sollte 100%
Breite des übergeordneten Objekts haben, minus 10px
links, rechts und unten sowie einen schwarzen Hintergrund.
.article-container {
position: relative;
}
.photo-caption {
width: 100%;
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
<div class="span15 article-container">
<img src="images/example-image-1.png" />
<div class="photo-caption">This is the subtitle text on top.</div>
</div>
Der linke Rand steht .photo-caption
außerhalb der Grenzen von .article-container
. Der rechte Rand scheint keine Wirkung zu haben.
Ich habe auch versucht, dies mit box-sizing
zu beheben. Es scheint, die Breite von .photo-caption
auf die übergeordnete Breite zu reduzieren, aber es gibt immer noch den Überhang.
Ein absolut positioniertes Element wird mit top
, left
, right
und bottom
positioniert, nicht mit margin
.
Es ist besser, width:100%
zu entfernen. schreibe so:
.photo-caption {
left:0;
right:0;
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
Das Problem ist, dass width=100%
photo-caption
die exakte Breite von article-container
ergibt. Das Hinzufügen von Rändern (oder Auffüllen) hat keinen Einfluss auf die Breitenberechnung. Sie können dies selbst mit dem css calc()
tun, damit der Stil zu:
.photo-caption {
width: calc(100% - 20px); // 20 = right margin + left margin
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
Beachten Sie, dass Sie möglicherweise nach calc () - Browserunterstützung suchen hier .
Verwenden Sie entweder padding
in Verbindung mit box-sizing
oder einen verschachtelten Block mit Rändern innerhalb Ihres absolut positionierten Blocks ohne Ränder.
Sie benötigen keine Breite: 100%, wenn Sie einen Block anzeigen. Das könnte alle diese kleinen Probleme lösen.
.photo-caption {
display:block;
background-color: black;
position: absolute;
bottom: 0px;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
padding:10px
}
Zum:
Einfache Antwort: Versuchen Sie nicht, Margin-Right zu verwenden. Verwenden Sie 'margin-left: xxxpx; '- machen Sie das xxx groß genug, um die Div-Box (Div-Style = Box) so weit wie nötig zu verschieben Keine Notwendigkeit für eine Geige, kann es genau dort platzieren, wo Sie es wollen.
Das Problem ist, dass Sie Ihre Breite auf 100% einstellen, was keinen Raum für Ränder gibt. Passen Sie stattdessen Ihre Breite auf einen Prozentsatz von weniger als 100% an und geben Sie dann Ihren Rand als die Hälfte des verbleibenden Platzes an.
Zum Beispiel:
style="width:98%; margin-left: 1%;"
Margin ist der Abstand von jeder Seite zum benachbarten Element OR der Dokumentränder.
Margin rechts bedeutet nicht, dass es das Element nach links schiebt. Dies bedeutet, dass auf der rechten Seite Platz erzeugt wird. Wenn das nächste Element angezeigt wird, wird es nach dem Margin-Right-Element eingefügt. In Ihrem Fall beträgt die Breite 100%. Kein Leerzeichen ist für Margin-Right verfügbar.
Konfusionspunkt: 1) Der visuelle Effekt unterscheidet sich, wenn width auto ist. Der gleiche Rand wird in right.But erzeugt, da die width-Eigenschaft fehlt.
2) Gleicher Effekt, wenn das Element nach rechts verschoben wird.
Diese beiden oben genannten Punkte machen ein anderes Bild des Randes aus.