Come modificare dinamicamente la larghezza di Div1 all'interno di una Divisione scorrevole Div2 a Div2

Come modificare dinamicamente la larghezza di Div1 all'interno di una larghezza Div2 a Div2 scorrevole. Controlla questo Jsfiddle http://jsfiddle.net/xdKrF/34/ Vedrai che lo sfondo verde si ferma a 1 punto (alla larghezza predefinita). Vorrei dividere il div con lo sfondo verde in tutto il div scorrevole.Come modificare dinamicamente la larghezza di Div1 all'interno di una Divisione scorrevole Div2 a Div2

Requisito importante, il TESTO non deve mai essere modificato e deve rimanere in 1 riga.

Qualcuno ha una soluzione semplice a questo? La soluzione complessa/hacky che riesco a pensare è scorrevole avrà una larghezza del 1000% e quando non è scorrevole sarà predefinita/100%. Usando @media.

HTML

<div id="container" style="overflow:auto"> 
<div id="content"> 
    Well hello 
</div> 
<p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p>

CSS

#content{ 
white-space:nowrap; 
background:green; 
}

fonte

2015-04-21 JaredT

OK, ho trovato una soluzione.

Avvolgere un contenitore e applicare float:left; per esso.

http://jsfiddle.net/2ugbkb6r/

fonte

2015-04-21 11:00:11

Ho cambiato float: a sinistra con display: blocco in linea perché in qualche modo altri elementi all'esterno del div ottengono lo sfondo ??? Verranno testati perché contribuire alla comunità quando sono libero. – JaredT

@JaredT A causa del 'float: left;' È possibile aggiungere un div con 'clear: both' per risolvere questo problema. Come questo: http://jsfiddle.net/t317hnLn/ –

Oh cool. anche se l'id si attacca con il blocco in linea per semplicità. – JaredT

Ecco il codice: ( JS Fiddle)

#content{ 
 
    white-space:nowrap; 
 
    background:green; 
 
} 
 
#container { 
 
    margin: 0 auto; 
 
    width: 90%; 
 
    overflow: auto; 
 
    word-wrap: break-word;  
 
}

<div id="container"> 
 
    <div id="content"> 
 
     Well hello 
 
    </div> 
 
    <p> 
 
     TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT 
 
    </p> 
 
</div>

fonte

2015-04-21 10:34:00

Questa sarebbe la soluzione al problema, se invece si desidera espandere il background-color del 1 ° div invece di montaggio del testo nella schermata, basta usare lunghezze fisse per entrambi e overflow: hidden per eliminare extra TEXT –

Non penso che sia ciò che op vuole ... –

I testi aggiuntivi sono importanti! e il testo deve essere in 1 riga. – JaredT

Potrebbe esserci sarà una risposta migliore, ma funziona. Basta aggiungere display:table; a #containerhttp://jsfiddle.net/xdKrF/36/

fonte

2015-04-21 10:34:36

bella soluzione greate. – ketan

Kinda buggy per gli altri div. Controlla questo http://jsfiddle.net/xdKrF/37/ – JaredT

Aggiungerai display: tabella; al genitore. Nella mia variante è #container. Nel tuo ci sono 2 genitori: # container e # container1. Basta aggiungere display: table; a # container1 –

Come modificare dinamicamente la larghezza di Div1 all'interno di una Divisione scorrevole Div2 a Div2

risposta

Problemi correlati