使用蓝图CSS,是否可以进行以下布局

发布于 2024-09-09 01:36:37 字数 414 浏览 4 评论 0原文

我想使用蓝图 css 进行以下布局,

Page Width = 960px

<- 20px -> <------- 600px -------> <- 20px -> <--- 300px ---> <- 20px ->
   left           main content       middle      right rail     right
  gutter                             gutter      (ad unit)      gutter

合适的列宽、边距宽度和列数是多少才能完成这项工作?

我试图用 10px 列和 10px 边距来做到这一点,但最终以 30px 作为中间装订线(一整列 + 右侧边距)

I would like to do the following layout using blueprint css

Page Width = 960px

<- 20px -> <------- 600px -------> <- 20px -> <--- 300px ---> <- 20px ->
   left           main content       middle      right rail     right
  gutter                             gutter      (ad unit)      gutter

What would the appropriate column width, margin-width and number of columns to make this work?

I am trying to do this with 10px columns and 10px margin but it ends up with 30px as the middle gutter (one full column + margin from the right)

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

鹿港小镇 2024-09-16 01:36:37

是否可以进行以下布局?

不,如果不重新设计整个框架就不行。

蓝图 CSS 使用:950 像素宽度、10 像素装订线以及从 30 像素开始并以 40 像素增量增加的列。因此:600px 将变为 590px,300px 将变为 310px。

您可以调整整个框架,调整每个组件的尺寸...

或者,您可以将列调整为以下之一:(30, 70, 110, 150, 190, 230, 270, 310, 350, 390, 430, 470 、510、550、590、630、670、710、750、790、830、870、910)像素...

或者,您可以尝试 960 网格系统。它使用 20 像素装订线、960 像素页面宽度和 40 或 60 像素列增量。它没有漂亮的、固定的排版设置。我不确定它是否也适用于跨浏览器和跨媒体。

常规布局资源:http://layouts.ironmyers.com/

Is it possible to do the following layout?

No. Not without reworking the whole framework.

Blueprint CSS uses: 950px width, 10px gutters, and columns that start at 30px and increase by 40px increments. So: 600px would become 590px and 300px would become 310px.

You could tweak the entire framework, adjusting every component's dimensions...

Or, you could adapt your columns to be one of: (30, 70, 110, 150, 190, 230, 270, 310, 350, 390, 430, 470, 510, 550, 590, 630, 670, 710, 750, 790, 830, 870, 910) pixels...

Or, you could try the 960 Grid System. It uses 20px gutters, 960px page width, and 40 or 60px column increments. It doesn't have the nice, canned typography settings. And I'm not sure if it holds up as well, cross-browser and cross-media.

General Layout resource: http://layouts.ironmyers.com/

嘦怹 2024-09-16 01:36:37

开箱即用,不。但是您可以尝试使用 Blueprint CSS 定制器,例如:

这些本质上采用默认的蓝图 CSS 文件,重新计算所有数字,并为您生成新版本的蓝图 CSS 框架。

Out of the box, no. But you can experiment with Blueprint CSS customizers, like:

These essentially take the default Blueprint CSS files, recompute all the numbers, and spit out a new version of the Blueprint CSS framework for you.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文