相关疑难解决方法(0)

使用两列flexbox布局,如何使不同大小的子项填充所有可用空间,而不是所有具有该行最高子级高度的子项？

我在jsbin上设置了一个说明问题的演示.我希望所有的孩子都能达到包装内容的大小.

#container {

 width: 800px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  width: 300px;
  flex; 1 auto;
}


<div id="container">

<div class="cell">
Cells with arbitrarily long content.</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

<div class="cell">
</div>

</div>

</body>
</html>

我试图在关闭H1标签之后在P标签内放置一些文本,如下所示:

标题这里是正确的文字....

但我无法让它发挥作用.我制作了这个CSS,但也许有些东西丢失了？

CSS:

p.start {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
    text-align: justify;
    display: inline;
}

h1.start {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    line-height: 28px;
    margin: 0;
    display: inline-block;
}

HTML:

<div id="containerIntro">
    <h1 class="start">Headline </h1>
    <p class="start">Text......</p>
</div>