Hệ thống lưới 960 - lưới lồng nhau có vấn đề bố trí

Question

Tôi vừa bắt đầu phát triển một trang web sở thích cho bản thân mình và cố gắng sử dụng 960 css grid system để bố trí các phần tử html của tôi trên màn hình.

Tôi có ý tưởng cơ bản và chỉ thực hiện một trang web xương here on my server

Có một số câu hỏi tôi đã có cho đến nay:

<div class="container_12"> 
<div class="grid_12"> 
    <div id='top_bar' class='grid_insider'><!-- start of #top_bar --> 

     <ul id='top_menu' class='grid_5'><!-- start of #top_menu --> 
      <li>Home</li> 
      <li>Fake1</li> 
      <li>Fake2</li> 
      <li>Fake3</li> 
     </ul><!-- end of #top_menu --> 
     <ul id='user_panel' class='grid_2 prefix_4'><!-- start of #user_panel --> 

      <li>log in</li> 
      <li>faq</li> 
     </ul><!-- end of #user_panel --> 

    </div><!-- end of #top_bar --> 
</div> 
<div class="clear"></div> 
<div id='title_bar' class="grid_12"> 
    <h1 id="logo" align='center'>LOGO, TITLE and SLOGAN all go here!</h1> 

</div><!-- end .grid_1 --> 
<div class="clear"></div> 

Tôi đang sử dụng một mẫu lưới 12 dựa , do đó tổng số "lưới" trên mỗi "hàng" nên là 12. Tuy nhiên, tôi chỉ có thể làm cho hai yếu tố trên cùng một "hàng" với tổng số lưới được thêm tối đa 11, nhưng không phải 12. Nếu tôi thay đổi lớp của #user_panel "tới" grid_3 prefix4 ", sau đó là tại thực sự sẽ đưa yếu tố này vào dòng tiếp theo, phá vỡ mọi thứ. Một điều nữa là, mặc dù các yếu tố cấp đầu tiên như top_bar và title_bar ở đúng vị trí (bạn có thể xác nhận rằng sử dụng một plugin Firefox tiện dụng gridfox), với chiều rộng chính xác là 940px, các lưới lồng nhau không nằm trong các vị trí mà chúng được cho là (cách xa các vị trí được thiết kế) một chút.

Tôi mới sử dụng hệ thống lưới css này, có cách nào tốt hơn để quản lý các yếu tố tổ? Tôi phải nói một số trang web mẫu trên 960.gs khá tuyệt vời để xem :)

Cảm ơn bạn đã đề xuất trước!

Cập nhật Thông tin

Okay, dựa trên câu trả lời dưới đây, tôi nghĩ nó vẫn còn có thể sử dụng biên giới màu khi gỡ lỗi lưới lồng nhau, có một cách adhoc để "ăn gian":

.grid_insider 
{ 
    border : 1px solid red; 
    margin : -1px; /* this will stop the element from 'expanding' its space */ 
} 

Answer 1

Không chắc chắn nếu bạn chưa nhận ra, nhưng khung làm việc cung cấp một phương pháp cho các phần tử lồng nhau.

/* `Grid >> Children (Alpha ~ First, Omega ~ Last) 
------------------------------------------------*/ 

.alpha { 
    margin-left: 0; 
} 

.omega { 
    margin-right: 0; 
} 

Điều này sẽ ghi đè các lề mà chúng cung cấp cho tất cả các phần tử lưới, do đó cho phép các phần tử nằm bên cạnh các thùng chứa của chúng.

Những gì bạn cần làm là cung cấp cho thanh menu bên trái lớp alpha, đúng lớp omega. Sau đó, bạn sẽ phải xóa tất cả của các đường viền mà bạn đã thêm vào hai yếu tố đó và vùng chứa của chúng. Điều này là do CSS float s rất chính xác và sẽ bị hỏng nếu bạn tạo các phần tử lớn hơn khung được xác định.

Nếu bạn cần thêm đường viền, bạn sẽ phải thêm một số kiểu bổ sung ghi đè các kiểu này và cung cấp chiều rộng hai px (một cho mỗi cạnh biên giới) nhỏ hơn nó được xác định trong khung.

Answer 2

và câu trả lời rất muộn ....

sử dụng một trong hai phác thảo cho biên giới của bạn

`outline: 1px solid red;` 

hoặc sử dụng hộp-sizing

 .gridInsider { 
     -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
     box-sizing: border-box; 
    }