Html 浮动跨距下的文本

我正在尝试对齐框中的文本。第一个文本下的第二个文本。这就是我到目前为止所做的：

*-----------------------------------------------------------------*
| *------* Floated text                                           |
| |      |                                                        |
| |      |             this text should be under floated text ... |
| *------*                                                        |
*-----------------------------------------------------------------*

如果我不浮动上面的文本（名称），我就不能在上面使用边距。如果我浮动它，我的底部文本（线程）将向右移动，就像在图形上一样

<div> 
  <span class='name' id='name'>$name</span>
  <br>
  <span class='overflow-ellipsis' id='thread'>$thread</span>
</div>


.name {
    float: left;
    margin-top:8px;
    font-weight: 700;
}

.overflow-ellipsis {
    clear:both;
    padding-top: 12px;
    width:550px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
}

我想把第二个文本放在第一个文本的下面，第一个文本的上边距是8px

左侧的框：

<div class='thumbnail'></div>
.thumbnail {
    margin-top:8px!important;
    margin-left:8px!important;
    margin-right:8px!important;
    border-radius: 8px;
    float: left;
    width: 48px;
    height: 48px;
    border: 1px solid black;
    margin: 0 auto; 
}

.缩略图{
利润率顶部：8px！重要；
左边距：8px！重要；
右边距：8px！重要；
边界半径：8px；
浮动：左；
宽度：48px；
高度：48px；
边框：1px纯黑；
保证金：0自动；
}

---

移除

位置：绝对位置来自
。溢出省略号
并添加
显示：内联块到它：

.overflow-ellipsis {
    clear:both;
    padding-top: 12px;
    width:550px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}

移除
位置：绝对位置来自
。溢出省略号
并添加
显示：内联块到它：

.overflow-ellipsis {
    clear:both;
    padding-top: 12px;
    width:550px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
}


.outer，
.盒子{
边框：1px点黑色；
}
.外部{
填充：10px；
}
.盒子{
宽度：100px；
高度：100px；
右边距：10px；
浮动：左；
}
.clearfix:之后{
内容：“.”；
显示：块；
身高：0；
明确：两者皆有；
可见性：隐藏；
}

浮动文本


此文本应位于浮动文本下。。。

.outer，
.盒子{
边框：1px点黑色；
}
.外部{
填充：10px；
}
.盒子{
宽度：100px；
高度：100px；
右边距：10px；
浮动：左；
}
.clearfix:之后{
内容：“.”；
显示：块；
身高：0；
明确：两者皆有；
可见性：隐藏；
}

浮动文本


此文本应位于浮动文本下。。。
已给出答案的备选答案：

只需使用
div
而不是
span
标记，移除
br
标记，并从
中移除
位置：绝对
。溢出省略号

这里有一个问题：
与已经给出的答案不同的答案：

只需使用
div
而不是
span
标记，移除
br
标记，并从
中移除
位置：绝对
。溢出省略号

这里有一个提示：
分别从
.name
和
溢出省略号
类的样式中删除不必要的
浮点
和
位置：绝对
。下面的代码片段中提供了使用其他小修补程序的演示


@charset“utf-8”；
html{
背景：灰色；
}
身体{
文本对齐：居中；
边际：0px；
填充：0px；
}
.标题{
最大宽度：720px；
最小高度：64px；
线高：64px；
字体系列：“机器人”；
字体大小：粗体；
文本对齐：居中；
背景：#e6；
保证金：0；
边框：1px实心#e6；
}
#包裹{
高度：100vh；
背景：白色；
最大宽度：721px；
保证金：自动；
文本对齐：左对齐；
}
.clearfix:之后{
明确：两者皆有；
内容：“.”；
显示：块；
身高：0；
线高：0；
可见性：隐藏；
}
.姓名{
边缘顶部：8px；
字号：700；
}
.溢出省略号{
填充顶部：8px；
最大宽度：550px；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}
.盒子{
利润率顶部：8px！重要；
最大宽度：720px；
最小高度：64px；
字体系列：“Roboto”，无衬线；
字体大小：400；
边框：1px实心#e6；
溢出：隐藏！重要；
文本溢出：省略号！重要；
位置：相对位置；
}
.缩略图{
利润率顶部：8px！重要；
左边距：8px！重要；
右边距：8px！重要；
边界半径：8px；
浮动：左；
宽度：48px；
高度：48px；
边框：1px纯黑；
保证金：0自动；
}

一些头衔
名称
线
分别从
.name
和
溢出省略号
类的样式中删除不必要的
浮点
和
位置：绝对
。下面的代码片段中提供了使用其他小修补程序的演示


@charset“utf-8”；
html{
背景：灰色；
}
身体{
文本对齐：居中；
边际：0px；
填充：0px；
}
.标题{
最大宽度：720px；
最小高度：64px；
线高：64px；
字体系列：“机器人”；
字体大小：粗体；
文本对齐：居中；
背景：#e6；
保证金：0；
边框：1px实心#e6；
}
#包裹{
高度：100vh；
背景：白色；
最大宽度：721px；
保证金：自动；
文本对齐：左对齐；
}
.clearfix:之后{
明确：两者皆有；
内容：“.”；
显示：块；
身高：0；
线高：0；
可见性：隐藏；
}
.姓名{
边缘顶部：8px；
字号：700；
}
.溢出省略号{
填充顶部：8px；
最大宽度：550px；
文本溢出：省略号；
空白：nowrap；
溢出：隐藏；
}
.盒子{
利润率顶部：8px！重要；
最大宽度：720px；
最小高度：64px；
字体系列：“Roboto”，无衬线；
字体大小：400；
边框：1px实心#e6；
溢出：隐藏！重要；
文本溢出：省略号！重要；
位置：相对位置；
}
.缩略图{
利润率顶部：8px！重要；
左边距：8px！重要；
右边距：8px！重要；
边界半径：8px；
浮动：左；
宽度：48px；
高度：48px；
边框：1px纯黑；
保证金：0自动；
}

一些头衔
名称
线
您能为显示的左对齐方形框提供html吗？@NikhilNanjappa Edit coming.您能为显示的左对齐方形框提供html吗？@NikhilNanjappa Edit coming.不，它什么也不改变。不，它什么也不改变。在小提琴中工作，因此您的代码中一定有其他内容（您在上面没有添加）这阻止了它工作…在小提琴中它工作，所以你的代码中一定有其他东西（你没有在上面添加）阻止它工作。。。