为什么段落没有浮动在头像旁边？

Question

不知何故，该段落没有浮动在个人资料图片旁边。它从 profilePic 的底部开始。我无法理解为什么。

这里有什么错误？

.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;
  float: left;
}

<div class="content">
  <div class="infoBit">
    <div class="profilePic"></div>
    <div class="infoText">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis enim ut sapien sodales commodo. Fusce congue, elit a finibus fermentum, diam eros mollis massa, at eleifend sapien dui eget mauris. Donec nec diam enim. Vivamus commodo placerat risus
        vitae auctor. Cras leo elit, egestas eget dolor vitae, facilisis consequat sem. Mauris facilisis ipsum in porttitor ullamcorper. Nam vel massa sed quam venenatis facilisis. Quisque vitae mollis urna. In egestas nunc sed felis consequat, in malesuada
        dolor feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </div>
  </div>
</div>

https://jsfiddle.net/4sbzos1r/

Answer 1

希望对您有所帮助

    .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:250px
    }
.infoText p{
  margin-top:0
}

<div class="content">
      <div class="infoBit">
       <div class="profilePic"></div>
       <div class="infoText">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis enim ut sapien sodales commodo. Fusce congue, elit a finibus fermentum, diam eros mollis massa, at eleifend sapien dui eget mauris. Donec nec diam enim. Vivamus commodo placerat risus vitae auctor. Cras leo elit, egestas eget dolor vitae, facilisis consequat sem. Mauris facilisis ipsum in porttitor ullamcorper. Nam vel massa sed quam venenatis facilisis. Quisque vitae mollis urna. In egestas nunc sed felis consequat, in malesuada dolor feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          </p>
        </div>
         </div>
    </div>

Answer 2

即使

被包裹在 .定义解决问题的宽度请更改样式如下

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

Answer 3

正如其他人所提到的，这是因为您将 <p> 包裹在带有 class infoText 的 <div> 中，它应用了样式 display: inline-block; float:left;来自你写的css。我建议要么完全删除 <div>，要么只删除您拥有的 infoText 样式。此外，您可能希望 margin-top:0 on .infoText 将文本置于顶部。

这有意义吗？

为什么段落没有浮动在头像旁边？

Why is the paragraph not floating beside the profilePic?

html

css

css-float