Wie kann ich die DIV-Breite an den Inhalt anpassen

Lesezeit: 4 Minuten

Benutzer-Avatar
Kapitän Comic

Ich habe ein div-Element mit angehängtem Stil:

.mypost {
    border: 1px solid Peru;
    font-family: arial;
    margin: auto;
    min-width: 700px;
    width: 700px;
}

Ich zeige WordPress-Post-Inhalte innerhalb des DIV-Blocks an, aber nehmen wir der Einfachheit halber an, dass es nur einen gibt <img> innerhalb der DIV. Ich möchte, dass mein div mindestens 700 px breit ist, und passe die Breite an, wenn das Bild breiter als 700 px ist.

Welche Möglichkeiten habe ich, das zu erreichen? Bitte beraten.

AKTUALISIEREN

Siehe meine Geige
http://jsfiddle.net/cpt_comic/4qjXv/

  • Sollte funktionieren, indem Sie die Position auf absolut setzen und die Breiteneigenschaft entfernen

    – picmate 涅

    10. Oktober 2013 um 3:24 Uhr

Benutzer-Avatar
Kap

Eine Möglichkeit, dies zu erreichen, ist die Einstellung display: inline-block; auf der div. Es ist standardmäßig a block -Element, das immer die Breite ausfüllt, die es ausfüllen kann (es sei denn, es wird angegeben width Natürlich).

inline-blockDer einzige Nachteil von ist, dass der IE es erst ab Version 8 korrekt unterstützt. IE 6-7 erlaubt es nur, es auf natürliche Weise zu aktivieren inline Elemente, aber es gibt Hacks, um dieses Problem zu lösen.

Es gibt andere Möglichkeiten, die Sie haben, Sie können beide float es, oder eingestellt position: absolute darauf, aber diese haben auch andere Auswirkungen auf das Layout, müssen Sie entscheiden, welches besser zu Ihrer Situation passt.

  • Warum falsche Antwort, Sie haben die Breite verwendet, um die Größe in der jsFiddle-Demo zu reduzieren

    – Achtung

    8. Mai 2014 um 6:39 Uhr

  • @Adeem Lesen Sie die Frage bitte noch einmal durch. Das innere Div hat eine feste Breite und das äußere Div sollte an die Breite seines Inhalts angepasst werden, aber sollte auch eine haben min-width. Meine Geige zeigt den Zustand an, wenn die min-width macht seinen Job. Bitte experimentieren Sie mit der Geige und sehen Sie, dass sie funktioniert (Profi-Tipp: Erhöhen Sie die Breite des inneren Elements auf 300px und schau was passiert).

    – kappa

    8. Mai 2014 um 8:36 Uhr

Ich möchte den anderen Antworten diese hübsche neue Lösung hinzufügen:

Wenn Sie nicht möchten, dass das Element zu einem Inline-Block wird, können Sie Folgendes tun:

.parent{
  width: min-content;
}

Die Unterstützung nimmt schnell zu, also wird es wirklich großartig, wenn Edge sich entscheidet, sie zu implementieren: http://caniuse.com/#search=intrinsic

  • Das ist genial!

    – J0ANMM

    14. März 2018 um 12:21 Uhr

  • Ich musste ein wenig modifizieren, um zu passen, was ich brauchte; “Breite: maximaler Inhalt; maximale Breite: 100 %”

    – Bronson

    7. Juni 2021 um 21:27 Uhr

Du könntest versuchen, es zu verwenden float:left; oder display:inline-block;.

Beides ändert das Verhalten des Elements von standardmäßig 100 % Breite auf standardmäßig die natürliche Breite seines Inhalts.

Beachten Sie jedoch, dass sich beide auch auf das Layout der umgebenden Elemente auswirken. Das würde ich vorschlagen inline-block wird jedoch weniger Auswirkungen haben, also versuchen Sie es wahrscheinlich am besten zuerst.

Versuchen width: max-content um die Breite des div durch seinen Inhalt anzupassen.

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  width: max-content;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>

</body>
</html>

Benutzer-Avatar
Piotr Kula

EDIT2- Ja, füllt automatisch die DOM SOZ!

#img_box{        
    width:90%;
    height:90%;
    min-width: 400px;
    min-height: 400px;
}

schau dir diese Geige an

http://jsfiddle.net/ppumkin/4qjXv/2/

http://jsfiddle.net/ppumkin/4qjXv/3/

und diese Seite

http://www.webmasterworld.com/css/3828593.htm

Ursprüngliche Antwort entfernt, weil sie falsch war.

Die Breite ist in Ordnung, aber die Höhe wird auf 0 zurückgesetzt

Also

 min-height: 400px;

  • Das wird nicht funktionieren. width: auto wird das div den gesamten Raum ausfüllen.

    – kappa

    2. Juni 2011 um 10:43 Uhr

  • Danke, aber es hält nicht die Mindestbreite. Entfernen Sie das Bild und sehen Sie nach.

    – Kapitän Comic

    2. Juni 2011 um 12:14 Uhr

  • Das wird nicht funktionieren. width: auto wird das div den gesamten Raum ausfüllen.

    – kappa

    2. Juni 2011 um 10:43 Uhr

  • Danke, aber es hält nicht die Mindestbreite. Entfernen Sie das Bild und sehen Sie nach.

    – Kapitän Comic

    2. Juni 2011 um 12:14 Uhr

1284080cookie-checkWie kann ich die DIV-Breite an den Inhalt anpassen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy