PHP条件垂直对齐

Question

I'm currently having a little trouble aligning some objects in a webpage I'm creating (with PHP/SQL/CSS).

So what I'm trying to achieve is a sort of timeline. I've basically got three columns, the timeline so to speak in the center and events in two columns. I'd like each event have a corresponding <div> (containing a dot or the date, whatever) on the timeline.

My question is, how can I vertically align each group (event + dot) this way ?

sketch of the result i want to acheive

By that i mean, if the dot <div> in the center hits what's above first, stop. Else wait for the event <div> to hit what's above.

All those events are pulled out of an SQL database, that's why i'm lokking for a way to do this programmatically.

Hope my question is clear enough, i'm kind of new to developping if you didn't spot me already.

Answer 1

Since you can have a box on the left and the right on the coloumb in the middle, you could add some boxed around these four elementes.

I've made this example, based on your original drawing: http://puu.sh/95fyu/ab8e737fd5.jpg

This would ensure that the boxes in the middle will stay relatively close to the left and right boxes.

To align the content of each box, you would have to split each into three sections: One for the left box, one for the middle one (containing two vertically stacked elements) and one for the right box. This can be seen on http://puu.sh/95fOQ/189e511405.jpg (marked with red).

However, the box on the right should be further down, compared to the surroding boxed, this can be solved by appling a margin to the top of the element equal to the height of the middle element.

The arrows will have to be drawn, using the relative placement of the different boxes.