Minulla on isäntädiv ja sen sisällä kolme lapsidiviä. Tarkoitus olisi saada vaakasuunnassa keskitettyä selainikkunan keskelle se div, jossa oleva radiobutton on valittu.
<div id="parent" style="overflow: auto; white-space: nowrap; width: 100%"> <div id="round1" style="display: inline-block"><input type="radio" name="opt" id="opt1" />1</div> <div id="round2" style="display: inline-block"><input type="radio" name="opt" id="opt2" />2</div> <div id="round3" style="display: inline-block"><input type="radio" name="opt" id="opt3" />3</div> </div>
En ole yrityksistä huolimatta keksinyt, mitä kaikkea CSS-tiedostoon täytyisi laittaa eli millainen CSS-koodin täytyisi olla. JavaScriptiä ja jQueryä en halua nyt käyttää vaan pitäisi saada homma toimimaan yhdistelmällä HTML + CSS.
Jos siis radiobutton opt1 on valittuna, näytön pitäisi näyttää tältä:
---------------------- | | | (*)1(*)2(*)3| | | ----------------------
Jos taas radiobutton opt2 on valittuna, näytön pitäisi näyttää tältä:
---------------------- | | | (*)1(*)2(*)3 | | | ----------------------
Kun radiobutton opt3 on valittuna, näytön pitäisi näyttää tältä:
---------------------- | | |(*)1(*)2(*)3 | | | ----------------------
(*) = radiobutton
Tuolla tavalla et kyllä sitä pysty tekemään. CSS ei salli parentin käsittelyä, eli et pysty liikuttamaan tässä tapauksessa radiobuttonien parentteja, joka olisi edellytys jotta saisit nuo radiobuttonien parent -divit liikkumaan halutulla tavalla.
Aihe on jo aika vanha, joten et voi enää vastata siihen.