Organiser la liste d'images en utilisant css

J'ai récupéré l'élément div d'un autre site web, grâce à ce groupe.Organiser la liste d'images en utilisant css

require_once('E:\wamp\www\in.com\components\simple_html_dom.php'); 


$html=file_get_html('http://www.behance.net/samerh/frame'); 
$ret=$html->find("div[id=frame-gallery]"); 
$ret=array_shift($ret); 
echo($ret);

Et le contenu de ce div est toutes les images et il affiche dans une seule liste, au lieu que je veux arranger en 3 colonnes et 10 lignes en écrivant le css et js pour elle.

Il devrait être dynamique, comme si toute nouvelle image d'un projet est ajoutée ou toute modification apportée à ce site devrait être affichée sur mon site actuel.

S'il vous plaît aider à me montrer comment faire cet arrangement en css,

Merci à l'avance.

Source

2010-07-12 saif

+1 @microspino, et est-ce juste * moi * qui a un problème avec txt-speak? * plz * ... frissonne. =/@saif, si c'est dynamique puis -barring d'une sorte de carrousel jQuery (etc) - vous ne pouvez pas décider à l'avance combien de lignes * et * colonnes vous voulez. Vous pouvez avoir l'un ou l'autre, et éventuellement un maximum. –

Je suis d'accord avec les commentaires. Apprenez à accepter les réponses que vous trouvez pour résoudre votre problème (si vous ne le savez pas, acceptez les réponses en cliquant sur la coche sous le décompte des votes). Cependant, je vais avoir pitié de vous.

Cette solution suppose que les images ont toutes la même largeur, à des fins d'illustration, je dirai 100px de large. Votre css pourrait être:

#frame-gallery {width: 330px;} 
#frame-gallery img {float: left; margin: 0 10px 10px 0;}

Cela devrait les organiser en 3 colonnes avec 10px espacement entre, et allez cependant de nombreuses lignes sont nécessaires pour de nombreuses images sont cependant chargées. Changez le width du #frame-gallery pour qu'il corresponde exactement aux width de 3 images plus toute marge, marge, bordures, etc. qui leur sont appliquées.

Source

2010-07-15 19:33:59 ScottS

Organiser la liste d'images en utilisant css

Répondre

Questions connexes