我正在尝试为我的雇主重新排列 Volusion 商店的元素。我们目前拥有的产品页面看起来像这样
我的任务是向上和向右移动详细信息框(包含“没有什么说“我准备好学习了!”)以与价格框对齐。该框是包含在嵌套层次结构中的表表,在不同的分支中处于大致相同的“深度”。
我无权访问该页面的 HTML,只能访问生成菜单和页脚以及相关 CSS 的模板 html 文件。网站上存在一些 JS,但由于我缺乏使用它的经验,所以我犹豫要不要进入它。
由于 table-and-div 结构,以及我无法编辑 HTML 的事实,我只剩下调整样式表和可能的一些 javascript。我的问题是:如何仅使用这些工具,在一个容器中获取一个元素并相对于另一个容器中的元素重新定位它?我试过了
Position:Relative;
left:some percentage;
top:some negative percentage;
其中,对于单个页面,我可以看起来相当不错,但是如果我允许其他人加载页面,它会完全崩溃,主要是因为我正在移动的元素的容器是根据屏幕宽度计算的,并且目的地的容器是用宽度减去一个常数值(产品的图像)来计算的。
我的雇主愿意接受这种安排并不完美,他们知道 Volusion 是魔鬼情结。但对他们来说重要的是,他们的产品“首屏”显示所有相关信息。显然我还没有找到任何答案。我发现没有多少人不得不在没有访问原始代码的情况下编辑网页,因为那很愚蠢。更糟糕的是,移动一个元素以与一个完全不同的容器对齐是我收集的糟糕策略,但它是我被要求完成的。