Partage
  • Partager sur Facebook
  • Partager sur Twitter

Div qui s'adapte(width) au texte contenu

Sujet résolu
3 août 2017 à 11:58:02

Bonjour , comme dis dans le titre je cherche à modifier la taille de ma div selon le texte contenu , actuellement j'ai ceci :

<div class="modal-body">
		<div style="font-size: 12px; max-width: 90%" class="alert alert-info">
			Hello...
        </div>
      </div>

J'ai donc définit une taille max à 90 % qui fonctionne mais maintenant la taille est toujours à 90 % , comment puis-je faire pour que la taille de ma div s'adapte au contenu ( en width ) ? 

Merci 

Edit :

J'ai tenter un 

display: table-cell

mais mon max-width ne fonctionne plus si je fais ça

-
Edité par MrQu3ntin 3 août 2017 à 12:06:10

  • Partager sur Facebook
  • Partager sur Twitter
3 août 2017 à 12:06:57

Hello,

Je ne dois pas avoir compris, car le comportement par défaut est que ton conteneur (le DIV) prend la hauteur (height) de son contenu.

-> https://jsfiddle.net/04wak3nr/ 

-
Edité par Lucky13 3 août 2017 à 12:10:07

  • Partager sur Facebook
  • Partager sur Twitter
3 août 2017 à 12:13:08

Bonjour, ce n'est pas la hauteur qui doit s'adapter mais la largeur

J'ai trouvé avec bootstrap le pull-left et pull-right, c'est ce que j'aimerais mais voila le soucis :

à cause du float, ça sort du cadre

-
Edité par MrQu3ntin 3 août 2017 à 12:20:20

  • Partager sur Facebook
  • Partager sur Twitter
3 août 2017 à 12:23:29

Ben met pas de float.

Ca sert a rien les float :p

  • Partager sur Facebook
  • Partager sur Twitter
3 août 2017 à 13:12:03

Applique un display: inline-block; sur ta div.
  • Partager sur Facebook
  • Partager sur Twitter

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

3 août 2017 à 13:35:01

Merci @MrChampy et @rhooManu pour vos retour, en revanche j'avais besoin de garder les float car sinon je perdais l'alignement gauche-droite :/

En revanche , avec la solution de @rhooManu, j'ai mis un display: inline-block sur la div contenant le tout et ça fonctionne^^

  • Partager sur Facebook
  • Partager sur Twitter
19 juin 2021 à 15:11:47

Concernant l'alignement tu peux utilisé le système de grid, ou les flexbox. 

Largement supporté par les navigateurs maintenant :) 

  • Partager sur Facebook
  • Partager sur Twitter

AnthoNoir

19 juin 2021 à 15:36:19

@Anthonoir576 Bonjour, merci de ne pas déterrer d'ancien sujet résolu.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter