【问题标题】:PHP conditional vertical alignmentPHP条件垂直对齐
【发布时间】:2014-06-11 09:49:34
【问题描述】:

我目前在对齐我正在创建的网页中的某些对象时遇到了一些问题(使用 PHP/SQL/CSS)。

所以我想要实现的是一种时间线。我基本上有三列,可以说时间线在中心,事件在两列。 我希望每个事件在时间轴上都有一个对应的<div>(包含一个点或日期等)。

我的问题是,如何以这种方式垂直对齐每个组(事件 + 点)?

sketch of the result i want to acheive

我的意思是,如果中心的点<div> 首先击中上面的内容,请停止。否则等待事件<div> 触发上述内容。

所有这些事件都是从 SQL 数据库中提取出来的,这就是为什么我正在寻找一种以编程方式执行此操作的方法。

希望我的问题足够清楚,如果你还没有发现我的话,我对开发有点陌生。

【问题讨论】:

  • 你尝试了吗?你有一些代码吗?
  • 不,不是这个问题,因为我不知道如何开始。
  • 表格似乎是要走的路。任何时候你需要一个空间,你可以添加一个空的表格单元格,从编程的角度来看,表格行的循环是最简单的事情。

标签: php html layout alignment


【解决方案1】:

由于您可以在中间的 coloumb 的左侧和右侧设置一个框,因此您可以在这四个元素周围添加一些框。

我根据您的原始图纸制作了这个示例: http://puu.sh/95fyu/ab8e737fd5.jpg

这将确保中间的框与左右框保持相对靠近。

要对齐每个框的内容,您必须将每个框分成三个部分:一个用于左侧框,一个用于中间框(包含两个垂直堆叠的元素)和一个用于右侧框。这可以在http://puu.sh/95fOQ/189e511405.jpg(用红色标记)上看到。

但是,右边的盒子应该更向下,与环绕的盒子相比,这可以通过在元素顶部应用一个等于中间元素高度的边距来解决。

必须使用不同框的相对位置来绘制箭头。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-09-26
    • 1970-01-01
    • 2020-09-27
    • 2012-04-29
    • 2015-09-06
    • 2011-03-16
    相关资源
    最近更新 更多