Question

我有一个有两个基本元素的容器。标题和正文。在标题div中我想要一个50px乘50px的图像和旁边的用户名，但我似乎无法获得用于显示内联的用户名。我究竟做错了什么？ http://jsfiddle.net/FqW9d/14/

Answer 1

向两个元素添加一个float：left。像：

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

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

Answer 2

在图片中添加一个浮动和包含名称的div，我在这里更新了你的jsFiddle http://jsfiddle.net/FqW9d/15/

Answer 3

您可以使用inline-block而不是inline使用div用户名或float僵尸img和`div。

使用inline-block进行演示：http://jsfiddle.net/FqW9d/16/

使用float进行演示：http://jsfiddle.net/FqW9d/17/

Answer 4

内联显示可能有点痛苦。跨浏览器的方式是这样的..

/* 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;

你需要声明那个命令的样式罪。

Answer 5

你有以下结构（我添加了一个图片网址，以便我们可以看到该元素）：

<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>

默认情况下，div元素和h1都是块级元素。但是，您需要做的只是float: left img和#client-name元素，它们将向左流动到它们的宽度（您声明），而不会强制下一个元素在下面流动。

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

http://jsfiddle.net/FqW9d/21/

所以你并不是真的在寻找display: inline，它会尝试显示元素，因为显示了“内联文本”（例如这段文字）;您想要的是img和#client-name元素不会“强制clear之后”。你的display: inline允许h1（一个块级元素）破坏你的显示，因为它覆盖了父元素的display: inline。

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

请参阅：

Answer 6

正如其他人所说的那样，将图像和人名称float: left; http://jsfiddle.net/FqW9d/20/

顺便说一句，我真的很喜欢你在这里所做的设置。所以我搞砸了你的消息来源： http://jsfiddle.net/FqW9d/22/

Answer 7

I feel its better to use -

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

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

我已更新您的代码 - http://jsfiddle.net/FqW9d/27/

但我认为你的结构＆amp; css可能会简单得多。由于我不知道目的，所以保持不变。

Div不会显示内联

7 个答案: