让孩子的span / div的父div的宽度和高度设为100％

Question

我在div内有几个跨度，我想知道的是如何使跨度占据父div的100％宽度，但是这些跨度的高度应该是自动的。 CSS：

.parent {
    position: fixed;
    width: 100%;
    height: 80px;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
    box-sizing: border-box;
    z-index: 90;
    background: #4070da;
    color: white;
    font-size: 1.5em;
}
.parent span{
    width: 100%;
    display: block;
    align-items: center;
}

HTML：

<div class="parent">
  <span>Depart</span>
  <span>07</span>
  <span>Mar 2018</span>
</div>

我想实现以下目标：

Answer 1

只需使用常规方法即可完成操作，然后放下弹性盒方法：

 .parent { position: fixed; width: 100%; height: 80px; top: 0; left: 0; padding: 0px 20px; box-sizing: border-box; z-index: 90; background: #4070da; color: white; font-size: 1.2em; } .parent span { width: 100%; display: block; text-align: center; } 

 <div class="parent"> <span>Depart</span> <span>07</span> <span>Mar 2018</span> </div> 

Answer 2

总结我对您的问题的理解是，您希望将Span元素中出现的文本围绕DIV的宽度居中

解决方案我将跨度更改为DIV，因为它们比跨度更易于控制，并为它们指定了类，以便您控制样式。

示例输出该示例未反映您的图像，因为它考虑到您希望文本与父元素成比例，在这种情况下，我将元素设置为有意向右200px进行显示，即使这样做，文本保持与其父元素成比例。

但是，要获得与您演示的完全相同的效果，只需更改宽度：200px到100％； 在父css类下。

 .parent { background: #4070da; color: white; font-size: 1.5em; width: 200px; float: right; height: 200px; } .text{ width: 100%; height: calc(200px / 3); text-align: center; margin: 0:auto; font-family: "arial"; vertical-align: middle; line-height: 2.6; } 

 <div class="parent"> <div class="text">Depart</div> <div class="text">07</div> <div class="text">Mar 2018</div> </div>