2014-04-25 1 views
1

J'ai actuellement un peu de mal à aligner certains objets dans une page que je crée (avec PHP/SQL/CSS).Alignement vertical conditionnel PHP

Donc ce que j'essaye de réaliser est une sorte de chronologie. J'ai essentiellement trois colonnes, la chronologie pour ainsi dire au centre et les événements dans deux colonnes. Je voudrais que chaque événement ait un <div> correspondant (contenant un point ou la date, peu importe) sur la timeline.

Ma question est, comment puis-je aligner verticalement chaque groupe (événement + point) de cette façon?

sketch of the result i want to acheive

je veux dire, si le point <div> au centre frappe ce qui est au-dessus d'abord, arrêtez. Sinon, attendez que l'événement <div> frappe ce qui précède.

Tous ces événements sont extraits d'une base de données SQL, c'est pourquoi je suis à la recherche d'un moyen de le faire par programmation.

J'espère que ma question est assez claire, je suis un peu nouveau à développer si vous ne m'avez pas déjà repéré.

+0

Avez-vous essayé quelque chose? Avez-vous du code? – Gwenc37

+0

Non, pas pour ce problème, parce que je n'ai aucune idée sur la façon de commencer. –

+0

Les tables semblent être le chemin à parcourir. Chaque fois que vous avez besoin d'un espace, vous pouvez simplement ajouter une cellule de tableau vide et d'un point de vue programmatique, une boucle de lignes de table est la chose la plus facile. –

Répondre

0

Puisque vous pouvez avoir une boîte sur la gauche et la droite sur le coloumb au milieu, vous pouvez ajouter une boîte autour de ces quatre éléments.

J'ai fait cet exemple, en fonction de votre dessin original: http://puu.sh/95fyu/ab8e737fd5.jpg

Cela permettrait d'assurer que les boîtes au milieu restent relativement proches des cases de gauche et de droite. Pour aligner le contenu de chaque boîte, vous devez les diviser en trois sections: une pour la boîte de gauche, une pour la boîte du milieu (contenant deux éléments empilés verticalement) et une pour la boîte de droite. Cela peut être vu sur http://puu.sh/95fOQ/189e511405.jpg (marqué en rouge).

Cependant, la boîte de droite devrait être plus bas, comparée à la boîte surrodée, ceci peut être résolu en appliquant une marge au sommet de l'élément égale à la hauteur de l'élément central.

Les flèches devront être dessinées, en utilisant le placement relatif des différentes boîtes.