elementi affiancati

[deleted_110]

ho bisogno di creare 2 elementi affiancati (ad esempio due span) in modo che il primo sia largo il minimo possibile per racchiudere il contenuto mentre il secondo vada a riempire tutto lo spazio rimanente indipendentemente dal contenuto

mi date una dritta? Grazie

[bertag]

potresti inserire gli elementi in due differenti div dandogli un float:left; in base alle tue esigenze, il primo lo crei con la larghezza minima dell'elemento da inserire, il secondo dovrebbe coprire lo spazio rimanente, altrimenti gli dai un width adeguato. Puoi anche sfruttare la larghezza in % potrebbe aiutarti nell'organizzazione logica dei due elementi. All'interno dei div vai a mettere i tuoi elementi e dovresti ottenere un buon risultato...

[deleted_110]

non conosco a priori il contenuto dell'elemento di sinistra

potrebbe anche essere vuoto nel qual caso tutto lo spazio deve essere occupato dall'elemento di destra.

il risultato che voglio lo ottengo facilmente con una tabella:

<table style="width: 100%">
    <tr>
        <td> pippo </td>
        <td style="width: 100%"> pluto </td>
    </tr>
</table>

ma non riesco a farlo con due span

[bertag]

allora un div come elemento html dovrebbe lavorare in modo simile cioè adattarsi a ciò che è inserito al suo interno ma non ne sono sicuro al 100%, comunque puoi provare a dargli un min-width:1px; in questo modo se è vuoto dovrebbe assumere la larghezza di 1 pixel....

[deleted_110]

il div va a capo, io li voglio affiancati

[bertag]

devi dare un float al div per non farlo andare a capo, devi dare al div di sinistra float:left; in questo modo si pone a sinistra e gli elementi inseriti dopo di lui gli verranno affiancati a destra, che sia testo o qualsiasi altro elemento

[deleted_110]

anche così il risultato assomiglia a quello che voglio io ma non è esattamente quello

con questa semplice prova si vede il bordo del div di destra andare sopra quello di sx

 
<div>
    <div style="float: left; background: green">
        pippo
    </div>
    <div style="border: 1px solid red">
        pluto
    </div>
</div>

[bertag]

prova così:

 
    <div style="border: 2px solid green; float:left; min-width:1px;">
        pippo 
    </div>
    <div style="border: 2px solid red;  float:left;">
        pluto
    </div>