IM générant du contenu avec PHP, mais une fois que le nombre de contenus est supérieur à 5, la hauteur devient supérieure à celle de la DIV, donc je ne veux donc pas qu'il s'empile sur le dessus de la DIV, mais de passer à la Droit du DIV et commencez par le haut. Voici une image.
tel qu'il apparaît, les livres de philosophie dans l'exemple tombent en panne et je veux que cela passe à droite et commence une autre colonne de cinq livres et ainsi de suite. Des idées que je peux faire cela avec jQuery et CSS?
11 Réponses :
Je crois que cela peut être utile éléments de liste HTML de haut en bas, puis de gauche à droite Le jsfiddle montre que si vous voulez le faire avec CSS, vous pouvez utiliser des colonnes CSS. Sinon, une réponse ci-dessous lie à un plugin JS pour y parvenir. Sinon, vous pouvez simplement faire le positionnement lorsque vous créez le contenu en PHP si cela est possible.
Le violon sur votre lien a le même problème que celui-ci dans cette question
Il est mentionné que ce n'est pas pris en charge sur tous les navigateurs. Le Fiddle travaille pour moi sur Firefox 26
Il me semble que vous n'avez pas besoin de la largeur complète de votre conteneur principal.
Pourquoi ne pas simplement ajouter une largeur fixe aux deux catégories et les définir sur Si vous souhaitez le déterminer de manière dynamique, vous pouvez vérifier la température de votre conteneur principal suffisant pour les deux catégories. Si ce n'est pas le cas, vous pouvez définir les attributs CSS des deux catégories (j'espère srsly pour vous, ils ont la même classe CSS;) avec P> Affichage: Inline; Code> ou Affichage: Inline-Block Code> (toujours en train de jouer ces deux ... SRY). $('.your-class').css({'width':'250px', 'display':'inline'});
En ce qui concerne la dynamique, je n'utilise pas JSON, im en utilisant php sur la page.
Ma solution implique JQuery et le plugin Columiniseur .
Voici le travail violon: http://jsfiddle.net/bortao/qgfsr/
la Le code est très simple: Le seul changement de votre CSS est cette nouvelle classe: qui devrait être ajouté à chaque bibliothèque = fichier . Ceci est uniquement pour empêcher le scintillement des articles non organisés. La classe est supprimée lorsque la colonne est terminée.
Je vais vous fournir 2 solutions ici, PHP et CSS, car @Areiel a déjà contribué une solution JQuery, car j'aime toujours être indépendante de JS, ainsi que celle-ci vous sauvera en utilisant un tiers Script em>, avec la bibliothèque de JQuery (si vous n'utilisez pas jQuery) em>, j'ai choisi PHP en premier et que le CSS, qui peut être moins compatible en termes d'IE. Si vous souhaitez réaliser cela à l'aide de PHP, vous devez modifier votre boucle et définir un compteur, ce qui va casser .. p> supposons que nous avons un tableau code> d'éléments, et Nous voulons se mettre comme vous en avez besoin. P> ul {
list-style-type: none;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
Vous pouvez obtenir la sortie que vous souhaitez utiliser uniquement une solution PHP, HTML, CSS que vous utilisez déjà:
php fort> p> .move_right{
display:inline-block;
vertical-align:top;
}
@ M.ALien sry je réponds tard, mais je dois vous dire que je n'ai copié aucune partie de votre réponse.J'ai aucune preuve de celle-ci. J'ai vu le violon d'Ariel mais je n'ai pas fait même lire un seul mot de votre réponse avant de poster une réponse moi-même depuis que votre réponse est un peu longue. Mais après avoir posté le commentaire ci-dessous ma réponse, j'ai lu votre réponse et je dois dire que le CSS au bas de votre réponse est également bon Et je dois apprendre quelque chose de nouveau. +1
Pas de problèmes, si vous n'avez pas copié que je vais prendre mon commentaire :)
Tout d'abord. Ne mettez pas de div dans une étiquette.
Ensuite, vous pouvez trouver fonction Array_Chunk PHP.
Donc ce que vous devez faire.
Il sera préférable que vous utilisiez pdo .
PDO FETCH Tout retournera tableau ;
Le code suivant détecte la fin de la DIV et crée une nouvelle colonne à l'aide de CSS.
var col = 1;
jQuery(
function($)
{
$('#flux').bind('scroll', function()
{
if($(this).scrollTop() +
$(this).innerHeight()
>= $(this)[0].scrollHeight)
{
$("#yourdiv").css("-moz-column-count",col);
$("#yourdiv").css("-webkit-column-count",col);
col++;
}
})
}
);
facile.
.LibrarySectsShelf {writing-mode: vertical-lr;}
.LibrarySectsShelf_Book {display: inline-block;}
Cela me montre Soutien zéro
@ M.ALien vraiment? Voici ce que je vois . Et, comme je l'ai déjà dit, j'ai testé le "?" Les navigateurs, et ils le soutiennent - et j'ai testé le navigateur «non pris en charge», et cela le supporte.
mode d'écriture: vertical-lr; est pas pris en charge. Mais l'exemple fonctionne bien sans elle .
Correction, ça ne marche pas. Il continue à aller de gauche-à droite, même avec mode d'écriture défini dans IE8.
tonnes de bonnes réponses ici, 1) Le PHP reste seul responsable de l'obtention de données à l'écran (réutiliser la même logique PHP pour les nouveaux Présentations à l'avenir) P> 2) Le JavaScript et CSS peuvent être flexibles pour fournir une disposition de balisage personnalisée par périphérique, navigateur et taille de vue p> Markup Strong> - Laissez PHP générer simplement les articles et oublie la présentation. P>
var items = $(".item");
for(var i = 0; i < items.length; i+=wrapinterval) {
items.slice(i, i+wrapinterval).wrapAll('<div class="wrapper"></div>');
}
La meilleure façon de le faire, utilise des boîtes flexibles CSS3 comme ceci:
Voici comment:
dans le CSS ajoutez ces 3 lignes dans et 1 ligne dans Veuillez noter que, puisque Flex Box est une nouvelle fonctionnalité de CSS3, vous devrez peut-être ajouter des préfixes de navigateur comme aussi Notez que la fonction Flex Box Wraps est uniquement disponible dans Firefox 28 et plus récente. Un exemple de navigateur de travail est disponible sur http://jsfiddle.net/29cmz/ car il est très flexible, il remplira tous les espaces disponibles et Vous n'avez pas à coder le nombre de lignes dans PHP / JavaScript. .LibrarySectshelf {...} .LibrarySectshelf_book {...} < / code> support de navigateur croisé
-webkit - , -moz - et -ms - pour le laisser fonctionner correctement dans tous les grands navigateurs. Pourquoi Flexbox
Copiez et collez ce morceau de code et essayez à votre fin et utilisez la logique.
<?php
for($i = 1; $i <= 20; $i++){
if($i % 5 == 1){
echo '<div style="float:left;">';
}
echo '<div class="LibrarySectsShelf_Book" style="background-color:'.$Color.'"
title="Author: '.$row['bbookauthor'].'">'.$row['bbookname'].'</div>';
if($i % 5 == 0){
echo '</div>';
}
}
?>
Identique à nouveau, pourquoi êtes-vous tous duplicant les réponses?
Êtes-vous sûr de ne pas vouloir que le 2e contenu apparaisse à côté du 1er contenu et ainsi de suite au lieu de ci-dessous?
Si vous n'avez besoin que de prendre en charge les navigateurs modernes, vous pouvez résoudre celui-ci avec PURE CSS, en utilisant des colonnes de texte.