J'essaie de créer une liste d'éléments qui ressembleraient à ceci:
L'exigence principale est que la liste doit être flexible de manière à ajouter ou à supprimer des éléments de liste sans toucher le code.
La meilleure solution que j'ai trouvée jusqu'à présent est de mettre jusqu'à présent Tous les éléments de la liste (y compris les en-têtes) dans les balises Je me demandais s'il y a de meilleures suggestions ici sur le débordement de pile.
6 Réponses :
Tant que vous n'avez pas besoin de prendre en charge les navigateurs plus âgés, vous ne pouvez utiliser que CSS3 multi-colonnes ...
http://www.quirksmode.org/css/multicicolumn.html < / p>
Ensuite, utilisez simplement une liste non ordonnée pour chaque catégorie.
Probablement la seule façon dont vous pouvez réaliser cela proprement (sans JavaScript) utilise la propriété Voici une démo: http://jsbin.com/efiqov/2/
En outre, les en-têtes doivent être des en-têtes, pas les éléments de la liste. Colum-Compte CSS. Ie ne le supporte que de 10+ cependant: http://caniuse.com/multicolumn
La solution CSS m'a donné des problèmes avec l'alignement vertical. Voici un exemple en direct de la façon de le faire avec JQuery (très facile): jsfiddle.net/eebvf/5 Utilisation de ce plug-in jquery: Github.com/fzondlo/jQuery-Columns
Vous pouvez facilement surmonter cela avec CSS3 Multi-Colum. Et pour les navigateurs IE, vous pouvez également utiliser le script. Voir le lien pour plus de détails
http: // www.cvwdesign.com/txp/article/360/multi-column-layout-with-csss3-et-some-javascript
Étant donné que vous avez la capacité complète de pré-traiter et d'avoir une hauteur fixe $menu=array(
"header" => "Drinks",
"item" => "Drink 1",
"item" => "Drink 2",
"item" => "Drink 3",
"item" => "Drink 4",
"header" => "Meats",
"item" => "Meat 1",
"item" => "Meat 2",
"item" => "Meat 3",
"item" => "Meat 4"
);
$item_count = 0;
$items_per_column = 5;
echo "<ul>";
foreach($menu as $key=>$value)
{
if($item_count % $items_per_column == 0)
{
echo "</ul><ul>";
}
$item_count ++;
echo "<li class='".$key."'>".$value."</li>";
}
echo "</ul>";
C'est une solution intéressante, mais je pense que je vais aller avec la solution multicolonne CSS pour le moment, car je peux vous permettre d'ignorer IE à ce stade (petit et petit groupe d'utilisateurs). En tout cas, j'apprécie votre réponse.
Rappelez-vous simplement que c'est-à-dire et tous les navigateurs plus âgés. Vous trouverez ci-dessous une liste complète indiquant quelles versions des navigateurs les plus populaires ont commencé, y compris la prise en charge de HTML5: Internet Explorer 9 et 10 Firefox 7 et plus chrome 14 et plus Safari 5 et plus Opéra 11 et supérieur Opéra 11 et Safari mobile supérieur 3.2 et supérieur mobile 32 et supérieur mobile 5 et plus Android 2.1 et supérieur source . Tout navigateur avec un numéro de version inférieur ne prendra pas en charge la technique de la disposition multi-colonnes.
En ne supportant pas IE 8.0 et Firefox 4.0, vous coupez instantanément le top 45% des internautes ( source ). En fait, si vous avez lu ce lien source (qui, avec certitude, a une année d'un an), vous remarquerez que le premier navigateur conforme HTML5 est celui de IE 9, mais par ce point, vous avez perdu 77,96% de tous les navigateurs, et toujours Il y a encore plus de navigateurs conformes à HTML5 dans la liste. Ce n'est pas seulement c'est à dire que vous perdez.
Le problème avec une approche comme celui-ci est que vous coupez arbitrairement les listes, c'est mauvais pour les bottes / lecteurs d'écran / SEO. Le faire dans JavaScript au moins maintient l'esprit HTML d'origine.
Assez vrai sur les bots et les lecteurs d'écran, mais c'est un correctif suffisant: liste des listes. Néanmoins mieux que de couper ce qui est presque tout l'Internet avec CSS3 et en fonction du script pour le reste (vous devez toujours avoir un Noscript alternatif)
Fondamentalement, tout ce dont vous avez besoin, pas de CSS3, JS ou PHP, fonctionne dans n'importe quelle version de n'importe quel navigateur, etc.
quatre colonnes trois colonnes etc. moins est plus, d'embrasser la simplicité!
Cela ne mettra pas en place le résultat que dans l'exemple de l'OP.
Pour autant que je puisse dire tout ce qu'il a, c'est une simple liste mordlicolenne automatique. Est-ce qu'il dit «ne pas toucher le code», comme il peut ajouter de nouveaux éléments à travers une interface externe, en ajoutant réellement de nouveaux LI. Je ne sais pas à ce sujet. Mais en ce qui concerne une ullicolumn ul, cela est fondamentalement que tous les besoins.
Vous pouvez le faire très facilement avec le plug-in jQuery-colonnes par exemple pour diviser une UL Avec une classe de .myliste dans 5 colonnes, vous feriez voici un exemple en direct sur jsfiddle
Regardez également maçonnerie
Tous les articles seront-ils de la même hauteur? Combien de pré-traitement peut-on faire (PHP, etc.)? Ceci est difficile, HTML et CSS n'ont jamais été faits pour accueillir des mises en page de hauteur fixe, en fait, le contraire; Les spécifications ont été conçues pour encourager les dispositions de largeur fixe ou fluide qui enveloppées et compensées de hauteur à n'importe quelle longueur de contenu. Avoir une hauteur fixe div (de sorte que l'emballage du haut sur le dessus par opposition à droite à gauche) est en quelque sorte contraire à cela. Il peut toujours être totalement possible! Mais cela dépend entièrement de vos besoins pour la situation.
@mplungjan a l'air intéressant, merci, je vais jeter un coup d'oeil.
@Sandygifford Vous voulez dire que les éléments ? Oui, ils auront la même hauteur. J'ai essentiellement le contrôle total du pré-traitement afin que je puisse générer des données dans n'importe quel format (à l'aide de Django / Python).
J'ai ajouté une réponse ci-dessous qui ne dépend pas des navigateurs ayant une prise en charge de tout
CSS ouJavaScript . C'est en PHP (je ne connais pas de Django ou de Python sur le côté serveur), mais il ne devrait pas être difficile de traduire.