「display：table-cell」沒有固定的對齊方式

Question

一旦介於div標籤，HTML標籤（例如標題，中斷）之間，內容不再對齊。例如：Html.DisplayFor（...）應該始終對齊。這怎麼解決？

<div class="table"> 
    <div class="row"> 
     <div class="cell"> 
      <h3>Heading 1</h3> 
      <hr /> 
      <div class="row"> 
       <div class="cell">Label 1</div> 
       <div class="cell">Html.DisplayFor(...)</div> 
      </div> 
      <div class="row"> 
       <div class="cell">Label 2 with much more Text</div> 
       <div class="cell">Html.DisplayFor(...)</div> 
      </div> 
      <br /> 
      <h3>Heading 2</h3> 
      <hr /> 
      <div class="row"> 
       <div class="cell">Label 3 with Text</div> 
       <div class="cell">Html.TextBoxFor(...)</div> 
      </div>   
     </div> 
     <div class="cell"> 
      ... 
     </div> 
    </div> 
</div> 

CSS：

div .table { 
    display: table; 
    width: 100%; 
} 

div .cell { 
    display: table-cell; 
    padding: 0.3em; 
} 

div .row { 
    display: table-row; 
} 

它實際上應該看起來更像這個（紅色線）：

Answer 1

它，因爲您不遵守打破布局的流僅使用table->row/cell結構，但在其中間注入了div和hr元素。

你可以寬度簡單地添加到第一列：

.row .cell .row .cell:first-child{ 
    width:200px; 
} 

Demo Fiddle