开发者

When using the 960 Grid System, How to have a column that's 181px?

开发者 https://www.devze.com 2023-03-11 06:21 出处:网络
I want to use the 960 Grid System and create a grid that\'s 981px using: http://www.gridsystemgenerator.com/gs01.php?GridWidth=981&GridColumns=3&GridMarginLeft=20&GridMarginRight=20

I want to use the 960 Grid System and create a grid that's 981px using:

http://www.gridsystemgenerator.com/gs01.php?GridWidth=981&GridColumns=3&GridMarginLeft=20&GridMarginRight=20

Problem is I don't see how I can make a left column with a width of 181. It seems that with the grid system I'm stuck with 开发者_如何学Go287. Is that true? THoughts?


Actually you shouldnt have a grid of only 3 columns. Dont think of a single column as a column in your layout (ie. main, right, left). Instead it is the smallest possible unit of horizontal measure. so you might have a left side bar that is 4 columns, a left sidebar of 3 columns and a main area of 5 columns.

That said if you need to have specific widths already embedded ina design youve been handed then using a grid framework probably isnt a good idea. Normally you would have the designer design to the grid you plan on using, or revise the design to snap to the grid. No matter what you do you may not be able to get a grid with a "n columns = 181px" measurement.


You could always 'break' out of the 960gs and create a div inside a column (that div would then be a set width). Make sure to account for that div, clear it properly, and you will get your desired width. But really you should be utilizing the grid system, or none at all if you need to hack up the whole page.

ex:

<div class="prefix_1 grid_3">
 <div style="width: 181px; float: left;">
  example
 </div>
</div>

Or position: relative; etc; however you want to break out of frames (whatever fits your setup I mean).


Here's a grid system with columns 181px wide that has a full width of 981px. The reason it matches your width requirement is that one outer edge is 1px wider than the other side. Knock that 1px off and you end up with a nicely rounded full width of 980px;

0

精彩评论

暂无评论...
验证码 换一张
取 消