A megoldhatatlan CSS probléma... :(
Sziasztok!
Az alábbi html kód hatására az ablak szélességének megfelelő mennyiségű oszlop jelenik meg a képernyőn.
Ha egészen kicsire húzod az ablakod:
ha szélesebbre:
ha ennél is szélesebbre:
és így tovább.
Hogyan lehetne megoldani _csak_ CSS és HTML segítségével, hogy ugyanilyen
működés mellett a számok ne egymás mellett, hanem egymás alatt kövessék egymást?
Véleményem szerint sehogy.
A kód:
■ Az alábbi html kód hatására az ablak szélességének megfelelő mennyiségű oszlop jelenik meg a képernyőn.
Ha egészen kicsire húzod az ablakod:
proba-01
proba-02
proba-03
proba-04
....
proba-02
proba-03
proba-04
....
ha szélesebbre:
proba-01 proba-02
proba-03 proba-04
proba-05 proba-06
proba-07 proba-08
....
proba-03 proba-04
proba-05 proba-06
proba-07 proba-08
....
ha ennél is szélesebbre:
proba-01 proba-02 proba-03
proba-04 proba-05 proba-06
proba-07 proba-08 proba-09
...
proba-04 proba-05 proba-06
proba-07 proba-08 proba-09
...
és így tovább.
Hogyan lehetne megoldani _csak_ CSS és HTML segítségével, hogy ugyanilyen
működés mellett a számok ne egymás mellett, hanem egymás alatt kövessék egymást?
proba-01 proba-04 proba-07
proba-02 proba-05 proba-08
proba-03 proba-06 proba-09
...
proba-02 proba-05 proba-08
proba-03 proba-06 proba-09
...
Véleményem szerint sehogy.
A kód:
<div style="float: left; width: 200px;">proba-01</div>
<div style="float: left; width: 200px;">proba-02</div>
<div style="float: left; width: 200px;">proba-03</div>
<div style="float: left; width: 200px;">proba-04</div>
<div style="float: left; width: 200px;">proba-05</div>
<div style="float: left; width: 200px;">proba-06</div>
<div style="float: left; width: 200px;">proba-07</div>
<div style="float: left; width: 200px;">proba-08</div>
<div style="float: left; width: 200px;">proba-09</div>
<div style="float: left; width: 200px;">proba-10</div>
<div style="float: left; width: 200px;">proba-11</div>
<div style="float: left; width: 200px;">proba-12</div>
<div style="float: left; width: 200px;">proba-13</div>
<div style="float: left; width: 200px;">proba-14</div>
<div style="float: left; width: 200px;">proba-15</div>
<div style="float: left; width: 200px;">proba-16</div>
<div style="float: left; width: 200px;">proba-17</div>
<div style="float: left; width: 200px;">proba-18</div>
<div style="float: left; width: 200px;">proba-19</div>
<div style="float: left; width: 200px;">proba-02</div>
<div style="float: left; width: 200px;">proba-03</div>
<div style="float: left; width: 200px;">proba-04</div>
<div style="float: left; width: 200px;">proba-05</div>
<div style="float: left; width: 200px;">proba-06</div>
<div style="float: left; width: 200px;">proba-07</div>
<div style="float: left; width: 200px;">proba-08</div>
<div style="float: left; width: 200px;">proba-09</div>
<div style="float: left; width: 200px;">proba-10</div>
<div style="float: left; width: 200px;">proba-11</div>
<div style="float: left; width: 200px;">proba-12</div>
<div style="float: left; width: 200px;">proba-13</div>
<div style="float: left; width: 200px;">proba-14</div>
<div style="float: left; width: 200px;">proba-15</div>
<div style="float: left; width: 200px;">proba-16</div>
<div style="float: left; width: 200px;">proba-17</div>
<div style="float: left; width: 200px;">proba-18</div>
<div style="float: left; width: 200px;">proba-19</div>
még sehogy