960.gs | 易学教程

Why does my floated left div go to the next line in IE6 using the 960.gs?

阅读更多关于 Why does my floated left div go to the next line in IE6 using the 960.gs?

问题 I'm using the 960 grid system to make a site (www.960.gs). I have a 9 column wide div (grid_9) with two divs inside it (grid_5 and grid_4). This is meant to yield one large outer div with 2 internal divs sitting side by side inside of it. However when viewed in IE6 it displays as one larger div with two internal divs, one below the other. In Firefox the divs sit next to each other, as they are meant to, and the same setup works fine in other parts of the site. What is going on? I can't work

How to choose the container 960px wide and not to 1200px in Bootstrap

阅读更多关于 How to choose the container 960px wide and not to 1200px in Bootstrap

问题 How to choose the container 960px wide and not to 1200px in Bootstrap? 回答1: Do you just want a fixed width website? If so then then just don't include bootstrap-responsive.css . The default width for a fixed width container will be 960px. Otherwise if you still want the responsive features but no 1200px container you will need to customize your bootstrap install. To do that: Go to http://twitter.github.com/bootstrap/customize.html Under the responsive section uncheck "Large desktops (>1200px)

When using grid 960, can I still have a 100% width header section?

阅读更多关于 When using grid 960, can I still have a 100% width header section?

问题 I want to use a grid system, like say grid 960. But I want the top header of the website to be 100%, is this still possible? 回答1: Sure... just manually style the top part to be 100%. 回答2: Yes. You can separate header from main content like: <body> <div class="header" style="width:100%;"></div> <div class="mainWrapper container_12"> <div class="grid_6"></div> <div class="grid_6"></div> <div class="clear"></div> </div> </body> 回答3: The 960gs uses a container, or wrapper div with a set width of

How to convert 960.gs website into HTML using Bootstrap 3

阅读更多关于 How to convert 960.gs website into HTML using Bootstrap 3

问题 I have created the photoshop mockup using 960.gs (960 Grid system). The website container width is 960px - center aligned. The site need to be responsive. What should i do, to convert the website into HTMl using Bootstrap 3? Do i need to customize bootstrap before downloading it? 回答1: 1) Get your current 960 configs (col number, gutters and offsets and col width). 2) build custom bootstrap set. You need to update Media queries breakpoints , Grid system and Container sizes sections with 960

CSS in Fluid 960 grid system

阅读更多关于 CSS in Fluid 960 grid system

问题 960 grid is great and after downloading it, I noticed that demo.html contains at the end examples of the .push and .pull classes like this one: <div class="grid_6 push_6"> <div class="grid_1 alpha"> <p> 60, class = "grid_6 push_6" => class = "grid_1 alpha" </p> </div>  <div class="grid_5 omega"> <p> 380, class="grid_6 push_6" => class="grid_5 omega" </p> </div>  <div class="clear"></div> <div class="grid_3 alpha"> <p> 220, class="grid_6 push

same height of columns with 960.gs?

阅读更多关于 same height of columns with 960.gs?

问题 i've got 4 columns in one row and depending on how much information i put in each of them they will have different heights. you can see that if you put a background color on them. how do i give the other columns the height of the column with the largest height? 回答1: You can use jQuery to do this. http://www.cssnewbie.com/equal-height-columns-with-jquery/ Alternaively for a CSS only approach you can make it look like they are the same height, by wrapping all columns in a div, and then applying

How to add a vertical line between two 960.gs boxes?

阅读更多关于 How to add a vertical line between two 960.gs boxes?

问题 I'm using the 960.gs grid system for a design. What is the best way to add a thin separating vertical line between two boxes? The width and color should be adjustable. My plan is to define a couple of div classes with absolute positions and background color, one for each possible position, and use JQuery to make sure that it has the same height as the surrounding boxes. That seems a bit complicated, though. Is there a better solution? 回答1: You can implement a border using the pseudo-selector

960 GridSystem, three grid_4 inside one grid_12

阅读更多关于 960 GridSystem, three grid_4 inside one grid_12

问题 I've created a 16 column layout with 960gs with a div class="grid_12" (main) and after that grid_4 (right) (12+4...) Inside that grid_12 I wanted a three column style (3 pcs. grid_4). But the grid_4 boxes don't fit inside the grid_12, the last box drop into a second row. Shouldn't the 960gs framework be able to do this layout for me, have i missed anything? Thanks in advance. <div class="container_16"> ... <div id="main" class="grid_12"> <div class="grid_12"> <div class="grid_4"></div> <div

Adding padding to a CSS grid system like 960.gs

阅读更多关于 Adding padding to a CSS grid system like 960.gs

问题 I'm building a site which makes use of the popular 960.gs 16 column grid system. Here's a screenshot of the relevant part of the design, with the grid columns overlaid on top: The issue is the white "popular right now" box. Since this has a white background, I want some padding inside the box. Simple enough: I added a <div> inside the parent one and styled it appropriately with padding: 10px and a white background. The problem comes when I try to re-use the grid inside an 'inner' <div> like

960 GridSystem, three grid_4 inside one grid_12

阅读更多关于 960 GridSystem, three grid_4 inside one grid_12

I've created a 16 column layout with 960gs with a div class="grid_12" (main) and after that grid_4 (right) (12+4...) Inside that grid_12 I wanted a three column style (3 pcs. grid_4). But the grid_4 boxes don't fit inside the grid_12, the last box drop into a second row. Shouldn't the 960gs framework be able to do this layout for me, have i missed anything? Thanks in advance. <div class="container_16"> ... <div id="main" class="grid_12"> <div class="grid_12"> <div class="grid_4"></div> <div class="grid_4"></div> <div class="grid_4"></div> </div> <div id="right" class="grid_4"> </div> </div> ..