Disposition de la grille CSS typique Place les éléments de la grille de gauche à droite, puis enveloppe à la rangée suivante, similaire à l'utilisation de Je veux Afficher (n) éléments verticalement alors démarrez une nouvelle colonne. Est-ce que cela est possible? P> Actuellement, je le fais avec JavaScript, insérant par exemple: strong> Compte tenu d'une liste alphabétique de 24 éléments que je souhaite afficher dans 3 colonnes. 8 lignes x 3 colonnes. P> Les éléments 1-8 s'afficheront dans la colonne 1, 9-16 s'affichera dans la colonne 2 et enfin, 17-24 s'affichera dans la colonne 3. P> flottant: gauche code> sur une série d'éléments de bloc. div> code> tags après chaque nième article mais espère une solution CSS. P > 1 | 9 | 17
2 | 10 | 18
3 | 11 | 19
and so on...
8 | 16 | 24
3 Réponses :
Voici ma solution:
p>
<div class="outer-1"> <div class="box-1">1</div> <div class="box-2">2</div> <div class="box-1">3</div> <div class="box-2">4</div> <div class="box-1">5</div> <div class="box-2">6</div> <div class="box-1">7</div> <div class="box-2">8</div> <div class="box-1">9</div> <div class="box-2">10</div> <div class="box-1">11</div> <div class="box-2">12</div> <div class="box-1">13</div> <div class="box-2">14</div> <div class="box-1">15</div> <div class="box-2">16</div> <div class="box-1">17</div> <div class="box-2">18</div> <div class="box-1">19</div> <div class="box-2">20</div> <div class="box-1">21</div> <div class="box-2">22</div> <div class="box-1">23</div> <div class="box-2">24</div> <div class="box-1">25</div> <div class="box-2">26</div> <div class="box-1">27</div> <div class="box-2">28</div> <div class="box-1">29</div> <div class="box-2">30</div> <div class="box-1">31</div> <div class="box-2">32</div> </div>
Si vous n'avez pas besoin de prendre en charge IE 9 et moins, vous pouvez utiliser Colum-Compte .
p>
<ul> <li>A</li> <li>B</li> <li>C</li> <li>D</li> <li>E</li> <li>F</li> <li>G</li> <li>H</li> <li>I</li> <li>J</li> <li>K</li> <li>L</li> <li>M</li> <li>N</li> <li>O</li> <li>P</li> <li>Q</li> <li>R</li> <li>S</li> <li>T</li> <li>U</li> <li>V</li> <li>W</li> <li>X</li> <li>Y</li> <li>Z</li> </ul>
Comment sur remplit votre grille-auto-flux: colonne ? .Container avec des éléments de blocs ... il devrait Éclipser en tant que rangées en bas, ajout de colonnes si nécessaire.
Conflit de navigateur, mate!
ah droite ... Les gens utilisent toujours IE. Dommage.
Son frère juste rediguleux. La plupart d'entre eux veulent soutenir, c'est-à-dire que vous savez en fait que personne ne veut toucher sale, c'est-à-dire dans la pratique. Certaines entreprises ne répertorient que c'est-à-dire un soutien à l'embauche de Dev pour s'assurer qu'ils comprennent les choses, mais en réalité, c'est-à-dire complètement à @san
@Cuonghoang Eh bien, vous savez ce qu'ils disent - pendant tout développement Web, 10% de votre temps est passé à écrire un beau code. Les 90% autres sont consacrés à la destruction de cela afin que cela fonctionne avec IE.