wake-up-neo.net

Rand rechts auf Breite gebrochen 100%

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.

htmlcsspositionmargin
24
Olly F

Ein absolut positioniertes Element wird mit top, left, right und bottom positioniert, nicht mit margin.

15
Sven Bieder

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;
            }
23
sandeep

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 .

6
Ali

Verwenden Sie entweder padding in Verbindung mit box-sizing oder einen verschachtelten Block mit Rändern innerhalb Ihres absolut positionierten Blocks ohne Ränder.

2
Marat Tanalin

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
        }
1
Wesley Terry

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.

1
Will Morledge

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%;"
1
Versatile

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. 

0
Parshant