CSS 문제 - 960.gs

Question

웹 UI에서 테이블을 꺼내기로 결정했지만 갑자기 CSS에 많은 문제가 있습니다.

.grid { 
    margin-left: auto; 
    margin-right: auto; 
    width: 960px; 
} 
.grid ._01, 
.grid ._02, 
.grid ._03, 
.grid ._04, 
.grid ._05, 
.grid ._06, 
.grid ._07, 
.grid ._08 { 
    display: inline; 
    float: left; 
    margin: 10px; 
    position: relative; 
} 
.grid ._01 { 
    width: 100px; 
} 
.grid ._02 { 
    width: 220px; 
} 
.grid ._03 { 
    width: 340px; 
} 
.grid ._04 { 
    width: 460px; 
} 
.grid ._05 { 
    width: 580px; 
} 
.grid ._06 { 
    width: 700px; 
} 
.grid ._07 { 
    width: 820px; 
} 
.grid ._08 { 
    width: 940px; 
} 
.grid .clear { 
    clear: both; 
    display: block; 
    height: 0px; 
    overflow: hidden; 
    visibility: hidden; 
    width: 0px; 
} 

그리고 여기에 HTML입니다 :

<div class="grid"> 
    <div class="_05"> 
     <img src="../logo.png" alt="" width="450" height="60" vspace="50" /> 
    </div> 
    <div class="_03" align="center"> 
     <form id="form1" name="form1" method="post" action=""> 
     <p> 
      <label>Email 
      <input type="text" name="textfield" id="textfield" style="margin-right: 0;" /> 
      </label> 
     </p> 
     <p> 
      <label>Password 
      <input type="text" name="textfield2" id="textfield2" /> 
      </label> 
     </p> 
     </form> 
    </div> 
    <div class="clear"></div> 
    <div class="_05"> 
     <div class="box"> 
      <h2>grid, _05, box, h2</h2> 
      <div class="content">grid, _05, box, content</div> 
     </div> 
    </div> 
    <div class="_03"> 
     <div class="box green"> 
     <h2>grid, _03, box, h2</h2> 
      <div class="content"> 
       <p>grid</p> 
       <p>_03</p> 
       <p>box</p> 
       <p>content</p> 
      </div> 
     </div> 
    </div> 
    <div class="clear"></div> 
    <div class="_05"> 
     <div class="box yellow"> 
      <h2>grid, _05, box, h2</h2> 
      <div class="content">grid, _05, box, content</div> 
     </div> 
    </div> 
    <div class="_03"> 
     <div class="box red"> 
      <h2>grid, _03, box, h2</h2> 
      <div class="content"> 
       <p>grid</p> 
       <p>_03</p> 
       <p>box</p> 
       <p>content</p> 
      </div> 
     </div> 
    </div> 
    <div class="clear"></div> 
</div> 

여기있다,

나는 960.gs에 조금 해킹했고 나는 단지 여덟 열이 내 자신의 그리드를했습니다 내가 이것을 할 수있는 방법 ...

bogus UI http://i33.tinypic.com/148md76.png

더 자세히 보려면 ​​... 특히 노란색 상자의 위치와 상단의 로그인 양식을 위치로 변경하려면 어떻게해야합니까? 모든 입력을 사전에

mockup UI http://i36.tinypic.com/2upptua.png

감사합니다!