Begrenzen Sie den Text auf die Breite des Geschwisterbildes / der automatischen Breite in CSS

Question

Ich versuche im Wesentlichen, eine Version des "Figuren" -Elements (bevorstehend in HTML5) zu erstellen, wobei ich ein Bild mit einer kurzen Beschreibung darunter habe.

Ich möchte jedoch die Breite dieses gesamten Elements auf das des Bildes einschränken, sodass der Text nicht breiter als das Bild ist (bei Bedarf in mehrere Zeilen einwickelt).

Grundlegende HTML:

<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>

Ich bin mit CSS vertraut, aber ich kann mir keine reine CSS-Lösung vorstellen, ohne ein hinzuzufügen style="width:100px" zum div zu der Bildbreite übereinstimmen.

Aktualisieren: Nach ein wenig Suchen und Denken scheint die beste Methode eine Inline -Breite auf der DIV zu verwenden. Ich werde das Breitenattribut auf dem Bild behalten, falls ich möchte, dass die Div etwas breiter ist als das Bild (z. B. um eine längere Bildunterschrift zu erhalten).

Dieser Ansatz bedeutet auch, dass ich zwei Bilder nebeneinander mit einer Bildunterschrift unten haben könnte. Wenn ich eine Reihe von Bildern gleich groß habe, kann ich jedem einen zusätzlichen Stil hinzufügen div.

Vielen Dank an alle, die geantwortet haben!

Answer 1

Stylesheet

div.figure img,
div.figure div.caption {
    width: 100%;
}
div.figure div {
    overflow: hidden;
    white-space: nowrap;
}

HINWEIS: Um das Verpacken zu aktivieren, entfernen Sie einfach die letzte CSS -Linie

Html

<div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div class="caption">A description for the image</div>
</div>

Ich habe es in Chrome, Firefox und IE7 überprüft und es sieht in allen drei gut aus. Mir ist klar, dass dies die Breite auf der Div und nicht auf der IMG hat, aber zumindest müssen Sie nur die Breite an einem Ort einstellen. Kurz als CSS-Expression (nur) kann ich keine Möglichkeit sehen, die äußere Divs-Breite auf die Breite des ersten untergeordneten Elements zu setzen.

Answer 2

Dies könnte auch mit Verwendung erreicht werden 'display: table-caption' Für die Bildunterschrift wie folgt:

Html

<div class="wrapper">
  <img src="image.jpg" />
  <div class="caption">My caption...</div>
</div>

Stylesheet

.wrapper {
  display: table;
}

.caption {
  display: table-caption;
  caption-side: bottom;
}

Dieser Block kann auch links von rechts von einem anderen Text geschwächt werden. Ich habe das in IE8+getestet. Hier ist ein JSBIN -Beispiel: http://jsbin.com/xiyevovelixu/1

Answer 3

Für die Einstellung der Breite, die dem Bild automatisch übereinstimmt, können Sie verwenden

.figure {
  display: table;
  width: 1px;
}

Dies lässt das Div wie eine Tabelle verhalten (nicht im Internet Explorer unterstützt). Oder Sie können eine Tabelle anstelle der Div verwenden. Ich glaube nicht, dass es eine andere Möglichkeit gibt, die Breite automatisch festzulegen.

Bearbeiten: Der einfachste Weg ist, die automatische Breite zu vergessen und von Hand zu setzen. Wenn es wirklich benötigt wird, können Sie JavaScript oder eine Tabelle verwenden. In diesem Fall ist die Verwendung einer Tabelle nicht so hässlich, da Sie eine Einschränkung der HTML -Version behandeln. Bei serverseitigem Skript können Sie auch die Breite einstellen, wenn Sie die Seite generieren.

Answer 4

Ich hatte das gleiche Problem und nach dem Lesen Dies beschlossen, ein Inline-Stil auf dem umgebenden Element zu verwenden. Scheint die bessere Lösung über die Verwendung einer Tabelle für mich.

Answer 5

Sie könnten die verwenden display:table Lösung für alle anderen Browser und a CSS -Verhalten Für Internet Explorer.