Question

我遇到了一个小问题，可能是微不足道的，我无法解决。我有两个div，每个div包含一个absolute，里面有一些文字。我注意到在这两个内部容器中改变字体高度，使外部容器不对齐。我知道我可能会玩body { margin: 0; } .outBox { width: 300px; height: 300px; background: rgb(173, 247, 136); display: inline-flex; align-items: center; } .inBox { width: 120px; background: rgba(53, 186, 222, 1); margin: 0 auto; text-align: center; padding: 5px; } .inBox h2 { margin: 0; font-size: 16px; color: white; } .inBox p { margin: 0; font-size: 18px; color: white; }职位，但是有人可以告诉我为什么吗？

<div class="outBox">
  <div class="inBox">
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
  </div>
</div>
<div class="outBox">
  <div class="inBox">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</div>

SELECT nPrice.Commodity AS Commodity, nPrice.CodeName AS CodeName, nPrice.
[P/N] AS PartNumber, nPrice.Price AS Today, oPrice.Price AS Tomorrow, 
pPrice.Price AS Next
FROM 
   SELECT * 
   FROM qryPrice 
   WHERE [MyDate] = #9/1/2017# AND [Type] = 'Net Price' AND [Commodity] = 
   'commodityX' 
   ORDER BY CodeName ASC  AS nPrice
   LEFT JOIN SELECT * 
             FROM qryPrice 
             WHERE [MyDate] = #1/1/2018# AND [Type] = 'Net Price' 
             ORDER BY CodeName ASC AS oPrice
             ON nPrice.[P/N] = oPrice.[P/N]
             LEFT JOIN  SELECT *
                        FROM qryPrice
                        WHERE [MyDate] = #2/1/2018# AND [Type] = 'Net Price' 
                        ORDER BY CodeName ASC AS pPrice
                        ON oPrice.[P/N] = pPrice.[P/N]
ORDER BY nPrice.[P/N];

Answer 1

我确信会有人能够解释为什么元素上的inline-flex与父级的flex不同（我不完全理解它），但我知道如果你取消“显示：你的outBox上的“inline-flex”，并将它们放在一个带有“display：flex”的容器元素中（或将它放在主体上），它将解决你的问题。

Answer 2

尝试将div包装在“包装器”中，并将其显示设置为“flex”

.wrapper {

显示：flex; }

body {
        margin: 0;
      }
 
.wrapper {
  display: flex;
  
}
      .outBox {
        width: 300px;
        height: 300px;
        background: rgb(173, 247, 136);
        display: inline-flex;
        align-items: center;

      }

      .inBox {
        width: 120px;
        background: rgba(53, 186, 222, 1);
        margin: 0 auto;
        text-align: center;
        padding: 5px;
      }

      .inBox h2 {
        margin: 0px;
        font-size: 16px;
        
        color: white;

      }

      .inBox p {
        margin: 0px;
        font-size: 18px;
        color: white;
      }

<div class="wrapper">
  
  <div class="outBox">

  <div class="inBox">
    <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
  </div>
  
</div>

<div class="outBox">

  <div class="inBox">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>

</div>
  
</div>

由于内部font-size元素，div容器之间的奇怪错位

2 个答案: