我正在尝试从该站点模仿标题图形导航: http://wpengine.com/
他们似乎没有在标题图形区域应用任何网格,而是将它们分隔为 2 个 div。在他们的英雄 block (容器)区域。我希望重新创建巨大的内容区域(带有 5 个导航按钮的流动内容框)。请尝试拉伸(stretch)浏览器的右侧,主要导航框保持在同一位置,左侧区域(内容)扩展为流畅。我正在尝试创造这种外观。
这些是下面的代码是我从谷歌开发者工具检查的代码:
/* For content navigation area */
.gwc_slide_buttons {
width: 375px;
height: 556px;
right: 0;
position: absolute;
}
/* For content area */
.gwc_slider {
left: 0;
right: 375px;
height: 556px;
position: absolute;
overflow: hidden;
}
我的代码中有:
/* For content area */
.slider_content {
position: absolute;
}
/* For the content navigation area */
.slider_content_navi {
width: 430px;
position: absolute;
}
正如您在这里看到的,我尝试了我的内容和导航按钮的绝对定位,但它不起作用,因为它应该与我检查过的代码进行比较。
有人有什么建议吗?
这是 jsFiddle 上的预览.
最佳答案
这是通过Media Queries实现的又名不同的屏幕尺寸不同的设计。您的 HTML 将保持不变,但您可以为不同的屏幕尺寸应用完全不同的样式。
我还注意到您正在使用 Twitter Bootstrap .检查它是 Grid System和 Responsive Design支持。
关于javascript - 如何在一个部分中实现 2 种不同的网格结构?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22311458/