Javascript 如何在一个部分中实现两种不同的网格结构？

我正在尝试模拟此站点的标题图形导航：

似乎他们没有在标题图形区域应用任何网格，而是将它们作为两个div分开。在他们的英雄区块（容器）区域。我希望重新创建巨大的内容区（流体内容框，带有5个导航按钮）。请尝试拉伸浏览器的右侧，主导航框保持在同一位置，左侧区域（内容）作为流体延伸。我正试图创造这种外观

以下代码是我从google开发者工具中检查的代码：

/* 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;
}

正如您在这里看到的，我尝试了内容的绝对定位和导航按钮，但与我检查过的代码相比，它不起作用

有人有什么建议吗

这是上的预览。

这是通过针对不同屏幕大小的不同设计实现的。您的HTML将保持不变，但您可以为不同的屏幕大小应用完全不同的样式

---

我还注意到您正在使用。检查它的功能和支持。

第2行是否有错误-

gwc_幻灯片按钮

应该是

。gwc_幻灯片按钮

？哎呀，我本来是要键入.gwc_幻灯片按钮的，不是没有“。”实际上，我在问你如何重新创建巨大的标题图形区域（包含5个导航框的内容）。请尝试拉伸浏览器的右侧，主导航框保持在同一位置，左侧区域（内容）作为流体延伸。我正试图创造这种外观。