基礎網格佈局

Question

我很努力地使用下面的代碼來分類佈局。

 <div class="row"> 
     <div class="large-6 columns"> 
      <div class="row collapse"> 
       <label>Contigency</label> 
       <div class="small-9 columns"> 
        <input type="text" name="contingency"> 
       </div> 
       <div class="small-3 columns"> 
        <span class="postfix">%</span> 
       </div> 
      </div> 
     </div> 
     <div class="large-3 columns"> 
      <div class="row collapse"> 
       <label style="text-align:right;">Project Management</label> 
       <div class="small-2 columns"> 
        <span class="prefix">$</span> 
       </div> 
       <div class="small-10 columns"> 
        <input type="text" class="" name="project_management"> 
       </div> 
      </div> 
     </div> 
     </div> 
<div class="row"> 
    <div class="small-12 columns"> 
     <div class="row"> 
     <div class="small-8 columns"> 
      <label for="right-label" class="center inline"><strong>Drawings/Permits/Inspect</strong> Engineered Drawings, Permits, and Inspections Commissioning</label> 
     </div> 
     <div class="small-2 columns"> 
      <span class="prefix">$</span> 
     </div> 
     <div class="small-2 columns"> 
      <input type="text" name="project_management"> 
     </div> 
     </div> 
    </div> 
</div> 

它產生以下內容。

我試圖排隊與上面的一個（項目管理）下輸入。

任何想法我錯了？

感謝，

約翰

Answer 1

好了，約翰，

這是兩件事情，首先你所有的底投入使用4列和頂部輸入僅使用3列，其次你正在摺疊你的第一排排水溝，但不會在第二排崩潰。

您有兩行，並且在頂行內嵌套了較小的行。您沒有在您創建的最後一行中嵌套任何較小的行。爲了得到一個關於你的數學，第一個美元符號的容器實際上是1/3寬度（或1/18）的屏幕寬度的1/6，因爲你在3/12中嵌套了2/12列柱。第二個美元符號位於屏幕寬度的1/6，因爲它位於2/12列。最高美元符號不符合第二個美元符號的原因是由於排水溝增加了額外的寬度。

但是，這將讓它看起來你怎麼樣：

<div class="row"> 
     <div class="large-6 columns"> 
      <div class="row collapse"> 
       <label>Contigency</label> 
       <div class="small-9 columns"> 
        <input type="text" name="contingency"> 
       </div> 
       <div class="small-3 columns"> 
        <span class="postfix">%</span> 
       </div> 
      </div> 
     </div> 
     <div class="large-3 large-offset-3 columns"><!-- add 'large-offset-3' to avoid any weirdness with this lining up in the future --> 
      <div class="row collapse"> 
       <label style="text-align:right;">Project Management</label> 
       <div class="small-2 columns"> 
        <span class="prefix">$</span> 
       </div> 
       <div class="small-10 columns"> 
        <input type="text" class="" name="project_management"> 
       </div> 
      </div> 
     </div> 
     </div> 
<div class="row"> 
    <div class="large-9 columns"><!-- this row will take up nine columns --> 
     <div class="row collapse"><!-- collapsing this row will make it line up with the above collapsed row --> 
     <div class="small-12 columns"><!-- setting this to 12 will have it fill all of the parent 9 columns --> 
      <label for="right-label" class="center inline"><strong>Drawings/Permits/Inspect</strong> Engineered Drawings, Permits, and Inspections Commissioning</label> 
     </div> 
     </div> 
    </div> 
    <div class="large-3 columns"><!-- this takes up three columns and essentially matches the code for the the above row --> 
     <div class="row collapse"> 
     <div class="small-2 columns"> 
      <span class="prefix">$</span> 
     </div> 
     <div class="small-10 columns"> 
      <input type="text" name="project_management"> 
     </div> 
     </div> 
    </div> 
</div> 

給一個去，請務必仔細閱讀我留在HTML解釋一切的意見。但基本上你需要確保你使用相同數量的列，如果你想排列起來，並且如果你摺疊一行，你需要摺疊其他行來排列它。