web-dev-qa-db-fra.com

Comment puis-je ajuster la largeur DIV au contenu

J'ai un élément div avec un style attaché:

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

Je diffuse WordPress poste le contenu à l'intérieur du bloc DIV mais pour simplifier, supposons qu'il n'y en a qu'un <img> à l'intérieur de la DIV. Je veux que mon div soit d'au moins 700 px de large et ajuste la largeur si l'image est plus large que 700 px.

Quelles sont mes options pour y parvenir? Veuillez conseiller.

[~ # ~] mise à jour [~ # ~]

Voir mon Fiddle http://jsfiddle.net/cpt_comic/4qjXv/

htmlcsslayout
37
Captain Comic

Vous pouvez y parvenir en définissant display: inline-block; Sur div. Il s'agit par défaut d'un élément block, qui remplira toujours la largeur qu'il peut remplir (sauf si vous spécifiez width bien sûr).

Le seul inconvénient de inline-block Est que IE ne le prend en charge correctement qu'à partir de la version 8. IE 6-7 ne permet que de le configurer naturellement inline éléments, mais il y a hacks pour résoudre ce problème .

Il y a d'autres options que vous avez, vous pouvez soit float, soit définir position: absolute Dessus, mais elles ont également d'autres effets sur la mise en page, vous devez décider laquelle correspond le mieux à votre situation.

77
kapa

Vous pouvez essayer d'utiliser float:left; ou display:inline-block;.

Ces deux éléments feront passer le comportement de l'élément de la valeur par défaut à 100% de largeur à la valeur par défaut à la largeur naturelle de son contenu.

Cependant, notez qu'ils auront également un impact sur la disposition des éléments environnants. Je suggérerais que inline-block aura cependant moins d'impact, il est donc préférable de l'essayer en premier.

16
Spudley

Je voudrais ajouter aux autres réponses cette toute nouvelle solution:

Si vous ne voulez pas que l'élément devienne un bloc en ligne, vous pouvez le faire:

.parent{
  width: min-content;
}

Le support augmente rapidement, donc quand Edge décide de l'implémenter, ce sera vraiment génial: http://caniuse.com/#search=intrinsic

15
Vandervals

EDIT2- Oui remplit automatiquement le DOM SOZ!

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

découvrez ce violon

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

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

et cette page

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

Suppression de la réponse d'origine car elle était incorrecte.

La largeur est correcte, mais la hauteur est réinitialisée à 0

alors

 min-height: 400px;
1
Piotr Kula