Wie kann ich die DIV-Breite an den Inhalt anpassen?

Question

Wie kann ich die DIV-Breite an den Inhalt anpassen?

Gefragt el 2 de Juni, 2011: Wann wurde die Frage gestellt
168581 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

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

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

Ich bin diplaying WordPress Post Inhalte innerhalb der DIV-Block, sondern der Einfachheit halber davon ausgehen, dass es nur eine <img> innerhalb des DIV. Ich möchte meine div mindestens 700 px breit sein und die Breite anpassen, wenn Bild breiter als 700 px ist.

Welche Möglichkeiten habe ich, dies zu erreichen? Bitte um Rat.

アップデイト

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

Gefragt el 2 de Juni, 2011 von Captain Comic

Answer 1

5 Antworten

Answer 2

95voto

kapa Punkte 75108

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

inline-block Der einzige Nachteil ist, dass der IE sie erst ab Version 8 richtig unterstützt. IE 6-7 erlaubt nur die Einstellung auf natürlich inline Elemente, aber es gibt Hacks zur Lösung dieses Problems .

Es gibt noch andere Möglichkeiten, Sie können entweder float es, oder setzen position: absolute aber diese haben auch andere Auswirkungen auf das Layout. Sie müssen entscheiden, welche Variante für Ihre Situation besser geeignet ist.

inline-block jsFiddle-Demo

Beantwortet el 2 de Juni, 2011 von kapa (75108 Punkte )

Answer 3

39voto

Vandervals Punkte 5224

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

Wenn Sie nicht wollen, dass das Element inline-block wird, können Sie dies tun:

.parent{
  width: min-content;
}

Die Unterstützung nimmt schnell zu, und wenn Edge beschließt, sie zu implementieren, wird das wirklich großartig sein: http://caniuse.com/#search=intrinsic

Beantwortet el 23 de Februar, 2017 von Vandervals (5224 Punkte )

Answer 4

17voto

Spudley Punkte 161296

Sie könnten versuchen, Folgendes zu verwenden float:left; o display:inline-block; .

Beides führt dazu, dass das Element nicht mehr standardmäßig 100 % breit ist, sondern die natürliche Breite seines Inhalts annimmt.

Beachten Sie jedoch, dass beide auch Auswirkungen auf das Layout der umgebenden Elemente haben. Ich würde vorschlagen, dass inline-block wird sich allerdings weniger stark auswirken, daher ist es wahrscheinlich am besten, dies zuerst zu versuchen.

Beantwortet el 2 de Juni, 2011 von Spudley (161296 Punkte )

Answer 5

7voto

Codemaker Punkte 7272

Versuchen Sie width: max-content um die Breite des Divs an 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>

Beantwortet el 31 de August, 2020 von Codemaker (7272 Punkte )

Answer 6

1voto

Piotr Kula Punkte 9253

EDIT2- Ja, Auto füllt den DOM SOZ!

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

Schau dir diese Fiedel an

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

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

und diese Seite

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

Die ursprüngliche Antwort wurde entfernt, weil sie falsch war.

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

also

 min-height: 400px;

Beantwortet el 2 de Juni, 2011 von Piotr Kula (9253 Punkte )

Wie kann ich die DIV-Breite an den Inhalt anpassen?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie kann ich die DIV-Breite an den Inhalt anpassen?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: