Question

我希望通过float在css中将3个文本保存在一行中但是在文本2之后，文本3显示在下一行。我希望在第一行显示文本3的一部分。

<style>
.a1{
  float: left;
}
</style>

<div class="a1">/11 11 11 11 11 11 1  1111 1 1  1 1 1 1 1  1 1  1 1 1  1 1  11 1 11 1 1 1 11 1 1111 11 1 11 11 1 1/</div>
<div class="a1">/22 22 22 22 2 22 22 22 22 2 2 22 2 22 2 2 2 22 2 22222 222 22 22 2 222/</div>
<div class="a1">/33 33 33 33 33 333 3 33 3333 33 3 33 33 3 3 33 33 33 33 3 3 3/</div>

Answer 1

您不能使用浮点数或任何块级display类型的元素，这不是行框模型的工作方式。您需要使用内联元素，例如span标记。

span:nth-of-type(2) {
  background: lightgrey;
}

<span class="a1">11 11 11 11 11 11 1  1111 1 1  1 1 1 1 1  1 1  1 1 1  1 1  11 1 11 1 1 1 11 1 1111 11 1 11 11 1 1</span>
<span class="a1">22 22 22 22 2 22 22 22 22 2 2 22 2 22 2 2 2 22 2 22222 222 22 22 2 222</span>
<span class="a1">33 33 33 33 33 333 3 33 3333 33 3 33 33 3 3 33 33 33 33 3 3 3</span>

JSfiddle Demo

Answer 2

浮动不是为了做这些事情，而是将“浮动”图像放在文本旁边：http://html.net/tutorials/css/figure016.gif

更好的解决方案是使用：

.a1 {
    display: inline-block;
}

如果你想强制它全部在1行，创建一个在其上有这个css的父元素。

.parent {
    white-space: nowrap; /* this prevents it from being on multiple lines*/
    font-size: 0; /* this prevents the space between the lines */
}
.a1 {
    display: inline-block; 
    font-size:12pt; /* set the font-size back to whatever you want */
}


/* Some extra styling */
.a1:first-of-type {
  color: red;
}
.a1:last-of-type {
  color: blue;
}

<div class="parent">
  <div class="a1">/11 11 11 11 11 11 1 1111 1 1 1 1 1 1 1 1 1 1 1 1 1 1 11 1 11 1 1 1 11 1 1111 11 1 11 11 1 1/</div>
  <div class="a1">/22 22 22 22 2 22 22 22 22 2 2 22 2 22 2 2 2 22 2 22222 222 22 22 2 222/</div>
  <div class="a1">/33 33 33 33 33 333 3 33 3333 33 3 33 33 3 3 33 33 33 33 3 3 3/</div>
</div>

在一行中再显示一个文本

2 个答案: