在响应式设计中移动最左侧的列

Posted 2023-03-06

【中文标题】在响应式设计中移动最左侧的列

【英文标题】：Move left-most column in a responsive design

【发布时间】：2012-02-09 07:11:05

【问题描述】：

我正在重新设计我的大学报纸的网站，并让该设计很好地适应 iPad。我现在正尝试将其切换为单列布局（适用于智能手机）。

问题在于，在单列布局中，右列必须高于左列。如果右列的代码写在左列之前，我会知道如何执行此操作，但不幸的是它不是。

如何将左列移到右列下方？是否需要使用 javascript 来切换 html 代码中的列顺序？谢谢！

编辑：我意识到当宽度 > someNumber 时我可以有一个不可见的 DIV。不过，我宁愿不必是多余的……

【参考方案1】：

CSS 可以将元素从文档流中取出，并以您想要的任何方式将它们放在任何地方。但它不能创建一个新的文档流（即它不能重新排序元素）。您需要将一个元素相对于另一个元素定位或绝对定位它们。

如果您可以访问 Javascript 并且不关心优雅的降级，您也可以交换两个 div 的 .innerHTML。

【讨论】：

要做到这一点，您需要知道右列占用的垂直像素数吗？

是的，我不确定你是否让左边相对右边和右边绝对（这样就不需要知道右边的高度）

【参考方案2】：

我能想到的最简单的方法是使用 jQuery（一个 javascript 库）将正确的列内容从一个 div 删除到 DOM 中的另一个。这允许您动态创建和删除 div，因此最终没有冗余。

如果这太模糊，请发表评论，我会添加一个示例。

【讨论】：

谢谢！我正在考虑这一点，但我宁愿不必依赖 Javascript。如果我无法弄清楚 Good Person 的解决方案，我可能会选择你的解决方案。谢谢！

【参考方案3】：

唯一的 CSS 解决方案是从最小的屏幕开始作为默认设计，然后随着屏幕尺寸的增加使用媒体查询进行增强。从最小的屏幕开始，首先将您的标记按正确的顺序排列 - 对于横幅上方的图像，主要导航，主要内容（右侧列），旁边（左侧列）和（大概），页脚。当媒体查询应用额外的 CSS 时，您可以将 Main Content 向右和向左浮动 - 对于更小或更大的屏幕，元素的位置正确。

【讨论】：

非常聪明——我终于明白人们为什么要先为移动端编写代码了。