Html Div将不会以内联方式显示

我有一个包含两个基本元素的容器。头和身体。在header div中，我想要一个50px×50px的图像，旁边还有一个用户名，但我似乎无法让用户名以内联方式显示。我做错了什么

向两个元素都添加一个float:left。比如：

#story-teller-head-contain img{
  float: left;
  /* your other styling */
}

#story-teller-head-contain h1 {
  float: left;
  /* your other styling */
}

---

在图像和包含名称的div左边添加一个float，我已经在这里更新了您的JSFIDLE

您可以使用

内联块

来代替

内联块

来使用用户名或

float

bot

和`div

使用
内联块进行演示
：

使用
float
：
内联显示的演示可能有点麻烦。跨浏览器的方法是这样的

/* Older version of FF */
display: -moz-inline-stack;

/* newer versions of FF and Webkit */
display: inline-block;

/* trigger the correct behaviour in IE */
zoom:1;

/* IE */
*display: inline;

您需要按照该顺序声明样式
 您有以下结构（我添加了一个图像url，以便我们可以看到该元素）：


因此，您并不是真正在寻找
display:inline
，它将尝试在显示“inline text”（如此段落文本）时显示元素的内容；您需要的是使
img
和
#client name
元素不“强制
清除
之后”。您的
display:inline
允许块级元素
h1
中断显示，因为它覆盖父元素的
display:inline

事实上，如果您使用Firebug或Chrome控制台进行检查，您将看到上面的计算为
float:left
和
display:block
，即使
display:block
尚未明确声明

见：






正如其他人所说，让图像和人名浮动：左

顺便说一句，我真的很喜欢你在这里的布置。所以我弄乱了你的消息来源：

您不必像在float方法中那样指定宽度。它将自动适应不同长度的文本

我已经更新了你的密码-

但我认为您的结构&css可以简单得多。因为我不知道它的用途，所以不去碰它。
您还应该删除多余的
display:inline
s。
<div id="story-teller-head-contain">
    <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
    <div id="client-name">
        <h1> Matt Morris </h1>
    </div>
</div>

#story-teller-head-contain img {
    float: left;
    height: 50px;
    width: 50px;
}

#client-name {
    float: left;
    height: 50px;
    width: 200px;
}

#story-teller-head-contain h1 {
    margin: 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: 'helvetica neue', arial, sans-serif;
    font-size: 12px;
    color: #3B5998;
}

I feel its better to use -

img{
   float:left;
}
#client-name{
   display: table-cell;
   zoom:1;/*For IE only*/ 
}