【问题标题】:Grid system with nested 100%-width header beside sidebar?边栏旁边嵌套 100% 宽度标题的网格系统?
【发布时间】:2012-07-14 21:59:07
【问题描述】:

我尝试使用 978.gs 和 Blueprint 创建以下布局:

我知道如何获得位于侧边栏上方的 100% 页宽标题,但我正在苦苦思索如何使用侧边栏和嵌套 100% 宽度标题使用网格系统获得所需的布局?如果网格系统无法实现,我该如何实现?

【问题讨论】:

    标签: html css layout grid


    【解决方案1】:

    Michael P,请尝试更具体地回答您的问题(尽管我们中的大多数人都非常欣赏您简洁的措辞!)。我将尝试回答,希望我能理解你。如果我做到了,那就别担心——这很容易!

    • 您的侧边栏有一个固定的 CSS width 属性并与左侧对齐。
    • 您的主要部分(右侧)应该占据剩余的页面宽度,(可能通过将margin-left 设置为与侧边栏相同的px 值)。
    • 您的主要部分包含标题栏,与侧栏分开,对吗?您的主要部分还包含您的网格系统。

    无论如何,主要部分应该是一个 HTML <div></div> 元素,对吧?

    如果您在主要部分中放置另一个 div,您可以将其设置为 100% 宽度。这只填充与其父容器一样宽。看这张照片:

    不管怎样,这里是我制作的代码:http://jsfiddle.net/Vm7YU/ 看看这个。我希望这回答了你的问题。如果没有,请说出来。

    【讨论】:

      猜你喜欢
      • 2020-09-01
      • 2013-04-03
      • 1970-01-01
      • 1970-01-01
      • 2022-01-25
      • 1970-01-01
      • 2021-05-20
      • 2019-01-27
      • 2020-03-15
      相关资源
      最近更新 更多