流体布局和位置固定

Posted

技术标签:

【中文标题】流体布局和位置固定【英文标题】:fluid layout and position fixed 【发布时间】:2013-09-30 22:55:38 【问题描述】:

我对使用引导程序和引导程序词缀插件制作的固定元素制作的流畅布局有疑问。

我想要实现的是一个类似于 android 平板电脑上的复合视图,其中您留下了一个元素列表,当您单击一个时,您会在右侧看到该元素的详细信息。

我的问题是,一旦插件将affix 类附加到右侧,它就会从页面中“取出”并且宽度很奇怪。 affix 类使元素具有position: fixed。这使得宽度不再与父级相关,而是与文档相关。

我已经用我的简化测试用例做了笔。您必须滚动才能看到效果。 http://codepen.io/anon/pen/zDieo

非常感谢您的宝贵时间

【问题讨论】:

【参考方案1】:

快速修复将其添加到您的 css 中

.affix , .affix-top 

width: 800px;

修改代码:http://codepen.io/anon/pen/gBHca

【讨论】:

感谢您的回答。但随后该元素将不再是流动的。【参考方案2】:

试试这个 - codepen

阅读这篇文章 - question

【讨论】:

以上是关于流体布局和位置固定的主要内容,如果未能解决你的问题,请参考以下文章

流体布局和 css 精灵

具有流体左列和固定右列的两列 div 布局

第32 章项目实战-移动端流体布局5

相对布局搞砸了如何固定它的位置

ArcGIS出图固定位置

用于固定组件位置和可滚动窗口的 Java GUI 布局