javascript - 如何在一个部分中实现 2 种不同的网格结构？

Question

我正在尝试从该站点模仿标题图形导航: 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 上的预览.

Answer 1

这是通过Media Queries实现的又名不同的屏幕尺寸不同的设计。您的 HTML 将保持不变，但您可以为不同的屏幕尺寸应用完全不同的样式。

我还注意到您正在使用 Twitter Bootstrap .检查它是 Grid System和 Responsive Design支持。