css - 如何仅使用 HTML 和 CSS 将外部 2 列滑动到中心列下方？

3 列，与页面居中的容器顶部对齐。当浏览器窗口比容器宽时 - 上面的示例很好。

当您缩小浏览器窗口的宽度时 - 列开始堆叠在页面下方。

问题:我怎样才能使最外面的两列的 z-index 低于中心列，这样当浏览器窗口被横向挤压时，而不是列在页面下方堆叠，外柱在中心柱下方(后面)滑动？

注意:我需要保持现在的行为。 3 个 div 对齐到容器的顶部。 3 div 增长/缩小以适合其内容(不能对列使用固定宽度、高度的 div)

--2010 年 4 月 19 日英国时间添加--

这似乎难倒了所有人 - 我添加了更多标签，看看是否还有其他人能解决这个问题。

即使您发布您的初步想法并解释为什么它们在这种情况下不起作用 - 以帮助避免死胡同，它也可能对我和其他人有所帮助。

我看过的一种方法是使用 iframe 而不是 div - 但是在跨域应用程序中自动调整 iframe 的大小需要一些奇特的 javascript。我想避免使用 javascript，更不用说这个跨域 hack 了。 - 我认为这是一个死胡同 - 除非你知道否则。

@RoToRa - 在这里我得到了绝对的顶部定位，div 大小适合内容，div 在主要中心 div 下滑动，当窗口被挤压时没有向下堆叠页面:

我使用了内联样式 - 但它很容易提取到 CSS 文件 - 如果我让它做我想做的事的话。

如果我可以让左右 div 到达中心 div - 只有在浏览器窗口强制它们滑到下方时，然后宾果游戏!

在应用方面:我想要一个 3 栏的网站。中心栏包含主要内容，我希望它成为先例。外部列用于从属内容和广告。

最佳答案

首先:这不是一个答案，但我有几个要点，它作为一个答案更具可读性。

我不认为你想要的是可能的。让元素相互滑动通常是人们想要避免的事情，因此这不是 CSS 的“标准行为”。

您必须使用绝对定位来使元素相互重叠，但您不能让元素根据其内容调整宽度和高度。

我能想到的最好的是 JavaScript，它可以基于现有的布局(这样它仍然可以在没有 JavaScript 的情况下显示)，并且在元素需要重叠时“踢进来”。然而，这不是一个简单的脚本编写，因为计算它也需要使用react的正确宽度并不简单。

另一种选择可能是 CSS 3 Media Queries ，它允许您根据窗口大小定义不同的 CSS 规则，但是这需要您确切知道您想要更改的宽度。

正如我提到的，元素重叠 - 特别是当它们包含文本时，人们希望能够阅读 - 这是人们通常试图避免的事情。也许你应该描述你的确切场景(哪些元素包含哪种信息，以及为什么它们可以重叠)而不是你认为的解决方案，那么可能会提出替代方案。

顺便说一句，我完全看不出 iframe 与问题有什么关系。

关于css - 如何仅使用 HTML 和 CSS 将外部 2 列滑动到中心列下方？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5702475/