使用蓝图CSS,是否可以进行以下布局
我想使用蓝图 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
不,如果不重新设计整个框架就不行。
蓝图 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/
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/
开箱即用,不。但是您可以尝试使用 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.