“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>