多行文本填充

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。

确保您的类以字母开头(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/

Answer 2

如果出于与旧浏览器兼容的原因，您不想使用display: flex，可以将它们内联为块，在顶部垂直对齐，然后使用jQuery获取它们的宽度并计算DIV4的宽度：

​

jQuery(document).ready(function() {
var width1 = $(".x1").innerWidth();
var width2 = $(".x2").innerWidth();
var width3 = $(".x3").innerWidth();
var width4 = (width1 - width2 - width3 - 8) + "px";
$(".x4").css("width", width4);
});

.x2, .x3, .x4 {
display: inline-block;
vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x1">
  <div class="x2">
    2.
  </div>
  <div class="x3">
    3.
  </div>
  <div class="x4">
    very long line of text very long line of text very long line of text very long line of text very long line of text very long line of text very long line of text
  </div>
</div>

​

(注意:计算中的-8是通过尝试和错误完成的-这是必要的，因为某些空格是由HTML代码中的换行符创建的，否则会将DIV4分解为下一行)