html - 多行文本填充

Question

我有以下结构:

<div class="1">
  <div class="2">
    2.
  </div>
  <div class="3">
    3.
  </div>
  <div class="4">
    very long line of text
  </div>
</div>

所以 div 1 有 display: block，所有其他有 display: inline。 我的目标是让这一行很长的文本像这样显示:

2. 3. very long
      line of text

如果我尝试将 div 4 制作成 inline-block 或 inline-flex 并设置 margin 和 text-indent 属性，然后它有点像我想要的那样，但它也会像这样将整个文本向下移动一行:

2. 3. 
very long
      line of text

我该如何正确地做到这一点？

Answer 1

使用flex解决这个问题，让容器div显示为flex。

确保您的类(class)以字母 (Which characters are valid in CSS class names/selectors?) 开头

https://jsfiddle.net/cymozzeL/1/

.t1 {
  display: flex;
}

还有很多你可以用它做的，请看看

https://css-tricks.com/snippets/css/a-guide-to-flexbox/