内联div与flex

时间:2019-01-22 08:10:01

标签: css flexbox

比方说,我有2个div应该是内联的,如果内容大于父div,我想使第二个div增长到第一个div以下。现在,当我添加flex并使其内联时,看起来像这样: JSFiddle

类似的东西:

enter image description here

有什么建议吗?

1 个答案:

答案 0 :(得分:2)

这对于flexbox是不可能的。

但是,如果您将必需的元素设为display:inline,则是这样。

.field,
.field-items,
.field-item {
  display: inline;
}

h2 {
  margin-top: 0;
  display: inline;
}
<div class="group-title-wrapper">
  <div class="field field-name-post-date field-type-ds field-label-hidden">
    <div class="field-items">
      <div class="field-item even">08 January</div>
    </div>
  </div>

  <div class="field field-name-title field-type-ds field-label-hidden">
    <div class="field-items">
      <div class="field-item even" property="dc:title">
        <h2>Vokalia and Consonantia, there live the blind texts.Lorem ipsum dolor amet schlitz ennui taxidermy bespoke vinyl lyft iceland selfies quinoa intelligentsia. Tacos semiotics yuccie fam photo booth hella health goth kitsch whatever waistcoat.</h2>
      </div>
    </div>
  </div>
</div>