<DIV> che si adattano al contenuto del testo

[melmar20]

ciao ragazzi, vorrei sapere se esiste un attributo per il tag <div> che mi faccia adattare lo stesso al contenuto che contiene.

Per essere più chiaro :

ho un div contenitore, all'interno contiene 5 div con delle parole di lunghezza diversa al loro interno. Vorrei che questi 5 div occupassero tutto lo spazio del div contenitore ma in maniera diversa. Ovvero quelli con la parola + lunga devono occupare + spazio e così via...

Vorrei evitare di usare la grandezza espressa in pixel. Sapreste aiutarmi per favore??

[Sgro]

Dichiarali come elementi inline. Da css:


display : inline


Ma a questo punto credo tu faccia prima ad usare, al posto di <div>, il tag <span> che è un elemento inline neutro. L'unica cosa a cui devi fare attenzione è che gli elementi inline non vanno a capo automaticamente quindi dovrai gestirlo manualmente.

[melmar20]

ho provato con inline, ma ancora non sono riuscito a fare ciò che desidero.

Forse mi sono espresso male nel post precedente.

vorrei che i div contenuti nel div contenitore lo occupassero completamente, senza che stia io ad impostare manualmente la grandezza per ciascun div. non so proprio come potrei fare

[Sgro]

Allora utilizza dei <div> neutri, senza alcun attributo o dimensione.

Gli elementi di blocco, come i <div> di default si allargano alla larghezza massima possibile, e nello specifico, quella dell'elemento che li contiene direttamente nel flusso del documento.

[melmar20]

ciao scusami solo che vorrei che si espandessero in modo da riempire tutto il div contenitore

[Sgro]

Ripeto:

"Gli elementi di blocco di default si allargano alla larghezza massima consentita, che è quella dell'elemento che li contiene direttamente nel flusso della pagina"

E' sufficiente che non specifichi alcuna larghezza ai div.

Quindi, o così, o hai bisogno di qualcosa di differente e non ti stai spiegando chiaramente.

[melmar20]

no infatti credo di non essermi spiegato bene.

ci riprovo:

ho
<div id="Contenitore" style="width: 700px;background-color: red;">

<div id="1" style="background-color: blue;">ciao</div>
<div id="2" style="background-color: blue;">ciao,ciao</div>
<div id="3" style="background-color: blue;">cia</div>
<div id="4" style="background-color: blue;">ciaooooo</div>
<div id="5" style="background-color: blue;">ciao</div>

</div>

ecco vorrei che i 5 ciao riempissero totalmente il div Contenitore, per farmi capire al meglio il colore red di sfondo al div Contenitore non dovrebbe più essere visibile. Lasciando il codice senza specificare la dimensione questo non accade.

[Sgro]

Ho preso il codice che hai postato, l'ho messo in una pagina vuota, e funziona esattamente come tu vorresti. Io credo che tu stia facendo le prove in una pagina dove hai definito qualche regola CSS globale che in qualche modo influenza il comportamento dei div.

Prova anche tu in una pagina nuova, pulita, e poi aggiungi eventuali altre regole css che stai usando una a una, finchè non trovi l'errore.

Ah dimenticavo, come "id" non usare mai dei numeri, non è consentito e può dare dei problemi.

Ciao.

[melmar20]

ok, grazie mille provo e ti dico.

Ciao!