2010-09-20 22 views
25

Ich versuche, eine h2-Header für Sidebar-Widgets zu machen, aber ich möchte die Breite der div-Klasse, welche Breite der Inhalt wird. Es scheint, dass ich nicht einfach eine Breite einstellen kann, da diese Überschriften mit längeren Inhalten als kürzere Inhalte den Bruch verursachen.Div Größe Automatisch Größe des Inhalts

Wie kann ich einfach die Breite dehnen/ändern abhängig von der Länge des Inhalts gibt es? Jede Hilfe würde sehr geschätzt werden.

Antwort

56

Soweit ich weiß, display: inline-block ist, was Sie wahrscheinlich brauchen. Das wird es so aussehen lassen, als wäre es eine Art Inline, aber Sie können immer noch Dinge wie Ränder und ähnliches verwenden.

+1

aber es macht mein div 100% in der breite das ist was ich nicht brauche – HollerTrain

+0

@HollerTrain: Welchen Browser benutzen Sie? Weil es hier perfekt funktioniert. Wenn ich deine 'width' und' text-align' entferne und "display: inline-block" auf 'h2.widgettitle' hinzufüge, bekomme ich das gewünschte Ergebnis. – Svish

+1

Übrigens, wenn ich du wäre, würde ich die Seite über http://validator.w3.org laufen lassen und versuchen, sie ein wenig zu verkleinern. Ich habe keine schlechte Internetverbindung und keinen langsamen Computer, aber Ihre Seite hat fast 1,5 Minuten zum Laden benötigt. Sie haben zum Beispiel einige Bilder, die viel größer sind, als sie sein müssen; jeweils rund 200kB. Installieren Sie http://getfirebug.com, wenn Sie nicht haben, öffnen Sie die Registerkarte Net und laden Sie Ihre Seite neu (Strg + F5, wahrscheinlich) – Svish

1

h2 { display: inline }

+0

Vergessen Sie nicht, die Zeilenhöhe einzustellen, um sicherzustellen, dass die h2s alle die gleiche Höhe haben, dies scheint zu versagen, wenn ich es an Ihrem Live-Beispiel versuche. –

1

Der beste Weg, dies zu tun ist display: inline; einzustellen. Beachten Sie jedoch, dass Sie bei der Inline-Anzeige den Zugriff auf einige Layout-Eigenschaften wie manuelle Höhe und vertikale Ränder verlieren, dies scheint jedoch kein Problem für Ihre Seite zu sein.

+0

Ja, wenn ich auf 'display: inline' setze, kann ich keinen unteren Rand einstellen, der dringend benötigt wird. Gedanken? – HollerTrain

3

Wenn display: inline; nicht funktioniert, versuchen Sie display: inline-block;. :)

+0

schränkt die Verwendung von 'display: inline' die Verwendung von' margin-bottom'-Befehlen ein? Jetzt, wo ich 'display: inline' verwende, kann ich den unteren Rand nicht hinzufügen! Gedanken? – HollerTrain

+0

Wenn ich nur inline benutze, habe ich vorgeschlagen, Inline-Block zu verwenden, das entfernt dieses Limit .. afaik. – Kyle

+1

'inline block' macht es 100% überspannt was ich nicht will – HollerTrain

-7

Der richtige Weg dazu ist die Verwendung eines Tags.

sind Blöcke ... sind Inline. Dafür sind sie gedacht.

Reagieren Sie auch auf Tags. Sie können nicht Aktion (setzen Sie ein) zu einem div, aber Sie können eine Aktion ...

Ich hoffe, es hilft.

+0

nein, es hilft nicht –

Verwandte Themen