résultats de recherche sans table

Question

J'implémente la page de recherche en php. -je présenter les résultats comme l'image suivante

Comment puis-je obtenir ce genre de conception à l'aide css. Je veux une conception fluide en utilisant des pourcentages avec une addition et une couleur de ligne alternative changée.

Laissez-moi savoir comment puis-je limiter une colonne pour ne pas avoir plus de 50 mots. tous les détails seront disponibles via un lien hypertexte sur chaque ligne.

Answer 1

C'est une situation idéale pour utiliser une table. Ne supposez pas simplement que «le design sans tablature est meilleur que le design avec des tables», les tableaux sont conçus pour être utilisés avec des données tabulaires et votre design s'adapte clairement.

A propos même/rangée impaire coloration, si vous ciblez les navigateurs modernes, utilisez la règle suivante:

table tr:nth-child(even) { background-color: #c0ffee; } 
table tr:nth-child(odd) { background-color: #123456; } 

Si vous ciblez aussi les anciens navigateurs, vous pouvez utiliser javascript pour cela, JQuery vient pratique:

$('table tr:even').css('background-color: #123456'); 

Ou ajoutez les classes manuellement dans votre code côté serveur. À propos de la limitation du nombre de caractères/mots dans la ligne, généralement effectuée côté serveur. Si vous utilisez un moteur de template comme Smarty, vous aurez probablement une fonction pour cela, mais ce n'est pas une grande chose à faire vous même.

Answer 2

1.) C'est une table, alors pourquoi ne pas utiliser des tables? 2.) Donner une div à chaque ligne et à l'intérieur de la div faire div diviser avec fixe avec. 3.) Voir cet exemple: http://www.bernzilla.com/design/tables/table.html