Wie erstellen Sie einen div-block passt, die content-Breite?
Ich habe ein div enthält, mit einer festen Breite Inhalt (Bild in einem anderen div) und eine variable Breite Inhalt (text, der dynamisch ändert). Ich brauche das äußere div an:
- start von eine neue Zeile
- genau so breit wie sein Inhalt
- vorzugsweise Ende in eine neue Zeile
Denn es sollte das einzige element auf der Zeile, die ich nicht nutzen kann display:inline
oder display:inline-block
. Auf der anderen Seite display:block
nicht automatisch verkleinern. Hier ist mein code:
Meine Experimente mit overflow
, float
und clear
ergab kein Ergebnis. Jede Hilfe, Ratschlag, link etc. sehr willkommen. Danke.
- Könntest du posten bis die relevanten HTML-und CSS-bitte? Oder noch besser, machen Sie eine jsfiddle.net version
- Versuchen
width:100%
Du musst angemeldet sein, um einen Kommentar abzugeben.
Dies ist, wie ich getan habe: ich gab
#outer
die CSS-style -display:inline-block
und dann legen Sie einfach in einem weiteren div mit der css -display:block
um sicherzustellen, dass#outer
blieb auf einer separaten Zeile:CSS
HTML
DEMO
display:table
oderwidth: intrinsic;
(letzteres wird leider nicht unterstützt von jeder DH in diesem moment). Mir diese zwei Lösungen erforderlich, um den text außerhalb#image
in ein div-Element und fügen Siefloat:left;
oderfloat:right
alle text auf der gleichen Zeile, obwohl.Ich bin nicht sicher, ob ich dieses Recht für Sie, aber ich denke, das hilft:
Indem
ändern kann man mitten in oben, unten, etc.
demo
Fügen Sie einfach
<br/>
zwischen Ihrem 'text-element" und das "block-element".Dann display:inline-block Ihre innere container
jsfiddled hier
Flex-box:
CSS:
HTML: