Html 多行文本填充

我的结构如下：

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

如果我尝试将

div

4设置为

inline block

或

inline flex

并设置

margin

和

text indent

属性，那么它会实现我想要的功能，但它也会将整个文本向下移动一行，如下所示：

2. 3. 
very long
      line of text

---

如何正确地执行此操作？

使用flex解决此问题，使容器div显示为flex

确保你的课程以字母（）

你可以用这个做更多的事情，请看一看

---

如果出于与旧浏览器兼容的原因，您不想使用

display:flex

，您可以将其设置为内联块，在顶部垂直对齐，然后使用jQuery获取其宽度并计算DIV4的宽度：

jQuery（文档）.ready（函数（）{
var width1=$（“.x1”）.innerWidth（）；
var width2=$（“.x2”）.innerWidth（）；
var width3=$（“.x3”）.innerWidth（）；
变量宽度4=（宽度1-宽度2-宽度3-8）+“px”；
$（“.x4”）.css（“宽度”，宽度4）；
});
.x2、.x3、.x4{
显示：内联块；
垂直对齐：顶部；
}

2.
3.
非常长的一行文字非常长的一行文字非常长的一行文字非常长的一行文字非常长的一行文字非常长的一行文字非常长的一行文字
让1成为flexcontainer@Huangism相同的结果请查看我的答案和Fiddle您的类值在CSS中无效：@Michael_B它们的实际名称不同，这只是为了简化，但感谢您注意谢谢您的答案，不幸的是，我必须使用纯CSS
2. 3. 
very long
      line of text

.t1 {
  display: flex;
}