如何仅使用 HTML 和 CSS 将外部 2 列滑动到中心列下方？
首先看到http://jsfiddle.net/b2BpB/15/
3列，与顶部对齐位于页面中央的容器。当浏览器窗口比容器宽时 - 上面的例子很好。
当您缩小浏览器窗口的宽度时，列开始在页面上向下堆叠。
问题：如何才能使外部两列的 z 索引低于中心列，以便当浏览器窗口在宽度方向上被挤压时，外部列会滑动，而不是沿着页面堆叠的列在中心柱下方（后面）？
注意：我需要保持目前的行为。 3 个 div 与容器顶部对齐。 3 个 div 增长/收缩以适应其内容（不能对列使用固定宽度、高度的 div）
--于 2010 年 4 月 19 日在英国添加--
这个似乎难倒了每个人 - 我添加了更多标签看看其他人是否能弄清楚。
它可能会帮助我&其他人即使你发布了你最初的想法并解释了为什么它们在这种情况下不起作用——以帮助避免死胡同。
我研究的一种途径是使用 iframe 代替 div - 但在跨域应用程序中自动调整 iframe 大小需要一些外来的 javascript。我想避免使用 javascript，更不用说这种跨域黑客了。 - 我认为这是一个死胡同 - 除非你不知道。
提前致谢...--
2010 年 4 月 19 日 13:44 UK 添加
-- @RoToRa - 在这里我得到绝对的顶部定位，div 大小以适应内容和内容。 div 在主中心 div 下滑动，当窗口被挤压时，不会向下堆叠页面：
我使用了内联样式 - 但这很容易提取到 CSS 文件 - 如果我让它做我想做的事。
如果我能走到左边&右边的 div 到中心 div - 只有当浏览器窗口强制它们滑到下面时，然后宾果游戏！
就应用程序而言：我想要一个 3 col 网站。中心栏包含主要内容，我希望它具有先例。外部列用于从属内容和广告。
First see http://jsfiddle.net/b2BpB/15/
3 columns, aligned to the top of a container which is centred on the page. When the browser window is wider than the container - the example above is good.
When you shrink the width of the browser window - the columns start to stack down the page.
Question: How can I make it so that the outer two columns have a z-index lower then the centre column, so that when the browser window is squeezed, width-wise, instead of the columns stacking down the page, the outer columns slide under (behind) the centre column?
Note: I need to keep the present behaviours. 3 divs align to top of container. 3 divs grow / shrink to fit their contents (can't use fixed width, hight divs for the columns)
--added 19 April 2010 am UK--
This one seems to be stumping everyone - I've added a couple of more tags to see if anyone else can figure it out.
It may help me & others even if you post your initial ideas and explain why they wont work in this instance - to help avoid dead ends.
One avenue I looked at is using iframes instead of divs - but auto resizing iframes in a cross-domain application requires some exotic javascript. I would like to avoid javascript, let alone this cross domain hack. - I think this is a dead end - unless you know otherwise.
Thanks in advance...
--added 19 April 2010 13:44 UK--
@RoToRa - here I get absolute top positioning, divs size to fit content & divs sliding under the main centre div with no stacking down the page as the window is squeezed:
I have used inline style - but this is easy to extract to the CSS file - if I ever get it to do what I want.
If I can just get the left & right divs to but up to the centre div - only sliding under when the browser window forces them to, then bingo!
In terms of the application: I want a 3 col web site. The centre col holds the main content and I want it to take precedent. The outside columns are for subordinate content and ads.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
首先：这不是一个答案，但是我有几点，并且作为答案更具可读性。
我认为你想要的不可能。元素在彼此下方滑动通常是人们想要避免的事情，因此这不是 CSS 的“标准行为”。
您必须使用绝对定位来使元素相互重叠，但是您不能让元素根据其内容调整宽度和高度。
我能想到的最好的方法是 JavaScript，它可以基于现有的布局（这样它仍然可以在没有 JavaScript 的情况下显示），并且在元素需要重叠时“启动”。然而，这不是一个简单的脚本编写，因为计算它也需要反应的正确宽度并不简单。
另一种选择可能是 CSS 3 媒体查询，它允许您根据窗口大小，但这需要您确切地知道您想要更改的宽度。
正如我提到的，元素重叠——尤其是当它们包含人们希望能够阅读的文本时——是人们通常试图避免的事情。也许您应该描述您的确切场景（哪些元素包含哪种信息，以及为什么它们可以重叠）而不是您感知的解决方案，然后就可以提出替代方案。
顺便说一句，我根本看不出 iframe 与问题有什么关系。
First off: This isn't an answer, however I have several points and it's more readable as an answer.
I don't think what you want is possible. Having elements slide under each other is normally something one want to avoid, so it's not a "standard behavior" of CSS.
You'd have to use absolute positioning to have elements overlap each other, but then you can't have the elements adjust width and height to their contents.
The best I can think of is JavaScript, which could be based on the existing layout (so that it would still be displayed without JavaScript), and just "kick in", when the elements need to overlap. However that wouldn't be a simple script to write, because calculating the correct width it needs to react too, isn't simple.
Another alternative could be CSS 3 Media Queries, which allow you define different CSS rules based on window size, however that would require you to know at exactly which width you want the change.
As I mentioned having elements overlap - especially when they contain text, which one would expect to be able to read - is something one usually tries to avoid. Maybe you should describe your exact scenario (which elements contain which kind of information, and why it's ok for them to overlap) instead of your perceived solution, then it may be possible to suggest alternatives.
BTW I can't see how iframes would have to do with problem at all.
你的意思是这样吗？
小提琴示例： HERE
如果就是这样，它将取决于您可以或不能设置的宽度，但如果这是这个想法，更多的规格会有所帮助
它都是浮动的或内联块，没有绝对定位，所以流量应该保留以允许页脚跟随..让我知道！
根据评论更新小提琴：此处
Do You mean like this?
Example Fiddle : HERE
if that's it it will depend on what widths you can or can't set, but if that's the idea more specs would help
It's all floated or inline-block, no absolute positioning so flow should remain to allow for footers to follow.. let me know!
Updated fiddle per comments : HERE