Html 为什么这段文字不在简介旁边浮动？

不知何故，这一段并没有漂浮在概要图片的旁边。它从profilePic的底部开始。我不明白为什么

这里出了什么错

.content{
边缘顶部：30px；
左边距：20px；
垫底：20px；
}
.infoBit{
宽度：800px；
浮动：左；
显示：内联块；
字体大小：1.1米；
右边填充：10px；
填充顶部：10px；
}
.profilePic{
边框：1px蓝色实心；
高度：49px；
显示：内联块；
宽度：49px；
浮动：左；
}
.infoText{
显示：内联块；
浮动：左；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。南奎斯·埃尼姆和萨皮安·索达莱斯·康莫多。Fusce congue，elit a finibus酵素，diam eros mollis massa，位于埃利芬德sapien dui eget mauris。请不要用钻石。普莱瑟斯共同生活酒店
维塔拍卖行。狮子座的精英们，快乐的生活，快乐的生活。乌拉姆科珀港的同侧毛里斯。南维尔马萨是威尼斯人的便利设施。莫利斯·乌尔纳的生活。在马莱苏阿达的埃格斯塔斯·努克·塞德·费利斯·康塞奎特
多洛·费吉亚特。Lorem ipsum dolor sit amet，是一位杰出的献身者。

希望这对您有所帮助

.content
{
边缘顶部：30px；
左边距：20px；
垫底：20px；
}    
.infoBit
{
宽度：800px；
浮动：左；
显示：内联块；
字体大小：1.1米；
右边填充：10px；
填充顶部：10px；
}
.profilePic
{
边框：1px蓝色实心；
高度：49px；
显示：内联块；
宽度：49px；
浮动：左；
}
.infoText
{
显示：内联块；
宽度：250像素
}
.INFOTEXP{
页边距上限：0
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。南奎斯·埃尼姆和萨皮安·索达莱斯·康莫多。Fusce congue，elit a finibus酵素，diam eros mollis massa，位于埃利芬德sapien dui eget mauris。请不要用钻石。共同生活在一个充满活力的地方。狮子座的精英们，快乐的生活，快乐的生活。乌拉姆科珀港的同侧毛里斯。南维尔马萨是威尼斯人的便利设施。莫利斯·乌尔纳的生活。在埃格斯塔斯，在马莱苏亚达，在多洛，在费吉亚特。Lorem ipsum dolor sit amet，是一位杰出的献身者。

希望这对您有所帮助

.content
{
边缘顶部：30px；
左边距：20px；
垫底：20px；
}    
.infoBit
{
宽度：800px；
浮动：左；
显示：内联块；
字体大小：1.1米；
右边填充：10px；
填充顶部：10px；
}
.profilePic
{
边框：1px蓝色实心；
高度：49px；
显示：内联块；
宽度：49px；
浮动：左；
}
.infoText
{
显示：内联块；
宽度：250像素
}
.INFOTEXP{
页边距上限：0
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。南奎斯·埃尼姆和萨皮安·索达莱斯·康莫多。Fusce congue，elit a finibus酵素，diam eros mollis massa，位于埃利芬德sapien dui eget mauris。请不要用钻石。共同生活在一个充满活力的地方。狮子座的精英们，快乐的生活，快乐的生活。乌拉姆科珀港的同侧毛里斯。南维尔马萨是威尼斯人的便利设施。莫利斯·乌尔纳的生活。在埃格斯塔斯，在马莱苏亚达，在多洛，在费吉亚特。Lorem ipsum dolor sit amet，是一位杰出的献身者。

即使被包装在一个容器中，它也可以正常工作。定义宽度可以解决问题 请更改以下样式

.content
{
    margin-top : 30px;
    margin-left: 20px;
    padding-bottom: 20px;
}    

.infoBit
{
    width: 800px;
    /* float: left; */
    display: inline-block;
    font-size: 1.1em;
    padding-right: 10px;
    padding-top: 10px;
}

.profilePic
{
    border:1px blue solid;
    height: 49px;
    display: inline-block;
    width: 49px;
    float: left;
}

.infoText
{
    display: inline-block;
  width: 700px;
}

---

即使被包裹在一个容器中，它也可以正常工作。定义宽度可以解决问题 请更改以下样式

.content
{
    margin-top : 30px;
    margin-left: 20px;
    padding-bottom: 20px;
}    

.infoBit
{
    width: 800px;
    /* float: left; */
    display: inline-block;
    font-size: 1.1em;
    padding-right: 10px;
    padding-top: 10px;
}

.profilePic
{
    border:1px blue solid;
    height: 49px;
    display: inline-block;
    width: 49px;
    float: left;
}

.infoText
{
    display: inline-block;
  width: 700px;
}

---

正如其他人所提到的，这是因为您的

包装在带有class

infoText

的

中，该类应用样式
显示：内联块；浮动：左来自您编写的css。我建议要么完全去掉
，要么干脆去掉你的
infoText
样式。此外，您可能希望
.infoText
上的
边距顶部：0
将文本置于顶部

这有意义吗？
正如其他人所提到的，这是因为您将您的
包装在一个
类
infoText
中，该类应用样式
显示：内联块；浮动：左来自您编写的css。我建议要么完全去掉
，要么干脆去掉你的
infoText
样式。此外，您可能希望
.infoText
上的
边距顶部：0
将文本置于顶部

这有意义吗？
为什么要在
中包装段落？@j08691:是的，删除div可以修复它，但我不明白为什么？问题归结为infoText div中的文本被包装在一个元素中（实际上是任何元素）。浏览器无法获取容器（在本例中为段落）并围绕浮动的profilePic div弯曲它——它可以使用文本本身，但不能使用容器。因此，如果您的文本只有一行，则可以在图像旁边浮动，因为不需要进行计算。但是一旦你有了不止一行的文本，浏览器就会把它的手伸到空中，把所有的东西都移动到浮动的profilePic div下面。你为什么要用
来包装这个段落？@j08691：是的，删除div可以修复它，但我不明白为什么？问题归结为infoText div中的文本被包装在一个元素中（实际上是任何元素）。浏览器不能将容器（在本例中为段落）围绕浮动的profilePic div进行弯曲——它可以做到这一点