Rand rechts gebrochen auf Breite 100%

Lesezeit: 4 Minuten

Olli F

Ich habe ein DIV, das ein Bild und ein zweites DIV enthält. Das übergeordnete DIV ist auf eingestellt position: absolute; das untergeordnete DIV ist eingestellt position: relative. Die Idee ist, dass ich meine Bildunterschrift über meinem Bild anzeige.

Das Kind DIV sollte haben 100% Breite des Elternteils, minus 10px links, rechts und unten sowie ein schwarzer 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="https://stackoverflow.com/questions/9877379/images/example-image-1.png" />
  <div class="photo-caption">This is the subtitle text on top.</div>
</div>

Der linke Rand bestoßen .photo-caption außerhalb der Grenzen von .article-container. Der rechte Rand scheint keine Auswirkung zu haben.

Ich habe auch versucht, dies mit zu beheben box-sizing. Es scheint die Breite zu bekommen .photo-caption bis zur Elternbreite, aber es gibt immer noch den Überhang.

Übrigens, ich denke, ich kann das mit einem Container für lösen .photo-caption und Einstellen der Auffüllung links/rechts (anstelle eines Rands). Dies scheint jedoch keine so saubere Lösung zu sein.

– Olli F

26. März 2012 um 18:13 Uhr
Soll die Bildunterschrift den unteren Teil des Bildes verbergen?

– Herr Lister

26. März 2012 um 18:17 Uhr
Wenn Sie ein Bild oder eine bessere Beschreibung dessen bereitstellen, was Sie möchten, ist es einfacher zu helfen

– Carrie Kendall

26. März 2012 um 18:19 Uhr
Hier ist ein Bild, um zu zeigen, was ich tun möchte: i.imgur.com/fqEc7.png

– Olli F

26. März 2012 um 18:35 Uhr
aber Sie möchten die Bildunterschrift oben?

– Carrie Kendall

26. März 2012 um 18:39 Uhr

sandeep

Es ist besser, wenn Sie entfernen width:100%. schreibe so:

.photo-caption  {
            left:0;
            right:0;
            background-color: black;
            position: absolute;
            bottom: 0px;
            margin-right: 10px;
            margin-left: 10px;
            margin-bottom: 10px;
            }

Übersehe ich etwas? Ich teste auch und wenn Sie dem inneren Div keine Breite hinzufügen, ist es so breit wie sein Inhalt, nicht das umgebende Div.

– Herr Lister

26. März 2012 um 18:36 Uhr
@MrLister danke für den Hinweis auf das Problem, weil ich die Position nicht gesehen habe: absolut. Überprüfen Sie jetzt meine aktualisierte Antwort

– sandeep

26. März 2012 um 18:42 Uhr
Ja, Lister, du hast recht. Ich brauche den Hintergrund der Bildunterschrift, um 100% Breite des Elternteils zu erreichen, minus zehn Pixel auf der linken/rechten Seite.

– Olli F

26. März 2012 um 18:46 Uhr
Sandeep, Lister, danke. Ich denke, Ihre aktualisierte Lösung würde auch funktionieren. Allerdings habe ich Svens als gelöst markiert (ich habe es zuerst gelesen und es braucht etwas weniger Codezeilen!).

– Olli F

26. März 2012 um 18:56 Uhr
Das ist die richtige Antwort! Beachten Sie nur, dass dies unnötig ist (und auch nicht funktionieren würde), wenn das übergeordnete Element eine Flexbox ist.

– Peter Moore

19. Dezember 2020 um 23:38 Uhr

Sven Bieder

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

Einverstanden, ich verstehe. Allerdings müsste ich noch den Rand auf der rechten Seite korrigieren. Hier ist ein Bild, um zu zeigen, was ich tun möchte: i.imgur.com/fqEc7.png

– Olli F

26. März 2012 um 18:36 Uhr
Von welcher Spanne redest du? Für die Bildunterschrift oder für den Artikelcontainer?

– Sven Bieder

26. März 2012 um 18:40 Uhr
Die Bildunterschrift sollte auch links, rechts, unten positioniert werden. Dann braucht man die Breite auch nicht mehr zu 100%. Es macht im Moment so oder so nicht wirklich Sinn, da deine Bildunterschrift im Moment eine Breite von 100% + 20px hat.

– Sven Bieder

26. März 2012 um 18:48 Uhr
Du hast es gelöst! Zusammenfassend muss das Element also explizit positioniert werden, anstatt Ränder zu verwenden. Breite 100 % kann entfernt werden und das Element benötigt keine Box-Sizing.

– Olli F

26. März 2012 um 18:54 Uhr

Das Problem ist, dass width=100% Würde geben photo-caption genaue Breite von article-container; Das Hinzufügen von Rändern (oder Auffüllen) würde die Breitenberechnung nicht beeinflussen. Sie können dies selbst tun, indem Sie das CSS verwenden calc() so wird der Stil:

.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 möchten hier

Danke uuu! width: calc(100% - 20px); Methode funktioniert genau so, wie ich es brauchte!

– Katarina Perovic

21. März 2020 um 10:59 Uhr

Das Problem ist, dass Sie Ihre Breite auf 100 % einstellen, wodurch kein Platz für Ränder bleibt. Passen Sie stattdessen Ihre Breite auf einen Prozentsatz von weniger als 100 % an und geben Sie dann Ihren Rand als halben Prozentsatz des verbleibenden Platzes an.

Zum Beispiel:

style="width:98%; margin-left: 1%;"

Benutze das eine oder das andere padding in Verbindung mit box-sizingoder verschachtelter Block mit Rändern innerhalb Ihres absolut positionierten Blocks ohne Ränder.

Wesley Terry

Sie brauchen width:100% nicht, wenn Sie Block anzeigen. Das könnte all 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
        }

Will Morledge

Zum:

Einfache Antwort: Versuchen Sie nicht, margin-right zu verwenden. Verwenden Sie ‘Margin-links: xxxpx; ‘ – machen Sie das xxx groß genug, um Ihre Div-Box (Div-Stil = Box) so weit wie nötig zu schieben. Keine Notwendigkeit für eine Geige, kann es genau dort platzieren, wo Sie es wollen.

Eine Geige wäre sehr hilfreich, insbesondere wenn die Frage spezifischer ist als die Hinweise dieser Antwort.

– dakab

24. November 2015 um 7:05 Uhr

13791800cookie-checkRand rechts gebrochen auf Breite 100%

#CSS #html #Position #Rand