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/18）1/3的1/6，因为你已经在3个内嵌了一个2/12列/ 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中留下的评论，解释一切。但基本上你需要确保你使用相同数量的列，如果你想要排队，如果你要折叠一行，你需要折叠你想要排列的其他行。

基础网格布局

1 个答案: