基础网格布局

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/6（或 1/18），因为您将 2/12 的列嵌套在 3/12 的列中柱子。第二个美元符号位于屏幕宽度的 1/6 列中，因为它位于 2/12 列中。顶部美元符号 3 次与第二个美元符号不适合的原因与装订线添加的额外宽度有关。

但这会让它看起来像你喜欢的那样：

<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 中留下的解释所有内容的评论。但基本上，如果你想让东西排列起来，你需要确保使用相同数量的列，如果你折叠一行，你将需要折叠其他你想要排列的行。

基础网格布局

Foundation Grid Layout

zurb-foundation