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

如果您不想因旧版浏览器的兼容性而使用browser.keys("\uE007")，可以将它们设为内嵌块，在顶部垂直对齐，然后使用jQuery获取其宽度并计算DIV4的宽度：

＆＃13;

display: flex

＆＃13;

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);
});

＆＃13;

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

＆＃13;

（注意：计算中的<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>是通过反复试验完成的 - 这是必要的，因为HTML代码中的换行符会创建一些空格，否则会将DIV4分解为下一行）

多行文本填充

2 个答案: