“display：table-cell”中的第二个“display：table”设置了不需要的margin-top

Question

此图像显示所需的布局：

“Lorem ipsum”div位于顶部，“Dolor sit”div位于其下方。右“P”div设置整个主包装部分的最小高度（第一部分），除非“Dolor sit”div增加高度（第二部分）。

此Plunker中显示了实施： Plunker demonstration

<section id="wrapperMain" style="display:table; width:100%">
 <div style="background-color:#2e3338; display: table-cell; min-width:50px; width:50px;">
  <h1 style="margin-left:25%; margin-right:25%">P</h1>
 </div>
 <div style="background-color:dodgerblue; display: table-cell;">

  <!--This section should fill its parent: dodgerblue div-->
  <!--So no blue color could be seen above "Lorem ipsum" div-->
  <section style="display:table; width:100%; background-color:crimson; margin-top:0;">
    <div style="display:table-row">
      <div style="background-color:darkslategray;">Lorem ipsum</div>
    </div>
    <div style="background-color: #1c1e22; border-style: none; resize: none; width: 100%;">Dolor sit Dolor sit Dolor sit Dolor sit Dolor sit Dolor sit </div>
  </section>

</div>

通过设置边距，高度，显示的任意组合，我无法将第二个表格部分停靠在表格单元格中，而顶部没有边距。现在我不确定这是否正确。

Answer 1

我认为这就是您所追求的，您只需将vertical-align:top添加到右侧的表格单元格中

我还修复了第二个表样式，因为block与table-rows和table-cells混合在一起可能会导致某些浏览器出现问题：

<section id="wrapperMain" style="display:table; width:100%">
  <div style="background-color:#2e3338; display: table-cell; min-width:50px; width:50px;">
    <h1 style="margin-left:25%; margin-right:25%">P</h1>
  </div>
  <div style="background-color:dodgerblue; display: table-cell; vertical-align:top"> <!-- add vertical align:top here -->

    <!--This section should fill its parent: dodgerblue div-->
    <!--So no blue color could be seen above "Lorem ipsum" div-->
    <section style="display:table; width:100%; background-color:crimson; margin-top:0;">
      <div style="display:table-row">
        <div style="background-color:darkslategray; display:table-cell">Lorem ipsum</div>
      </div>
      <div style="background-color: #1c1e22; border-style: none; resize: none; width: 100%;display:table-row;">
        <div class="display:table-cell">Dolor sit Dolor sit Dolor sit Dolor sit Dolor sit Dolor sit</div>
      </div>
    </section>
  </div>
</section>