Div将不会显示内联
我有一个容器有两个基本元素。标题和正文。在标题div中,我想要一个50像素×50像素的图像和一个用户名旁边的,但我似乎无法得到用户名显示内联。我究竟做错了什么? http://jsfiddle.net/FqW9d/14/Div将不会显示内联
向这两个元素添加一个float:left。像:
#story-teller-head-contain img{
float: left;
/* your other styling */
}
#story-teller-head-contain h1 {
float: left;
/* your other styling */
}
添加留给形象和包含名称的DIV的浮动,我已经更新在这里你的jsfiddle http://jsfiddle.net/FqW9d/15/
你也应该删除多余的'display:inline's。 – 2012-02-18 16:34:58
可以使用inline-block
代替inline
为div
与用户名或float
BOT img
和`格。
演示与inline-block
:http://jsfiddle.net/FqW9d/16/
演示与float
:http://jsfiddle.net/FqW9d/17/
内嵌显示器可以是有点疼痛。跨浏览器的方式是这样的...
/* 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;
您需要声明顺序的样式sin。
你有以下结构(我已经添加了图片的网址,所以我们可以看到,元素):
<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;
}
所以你没有真正寻找display: inline
,这将尝试显示元素的是“嵌入式文本”显示(如本段文字);你想要的是img
和#client-name
元素不是“在012之后强制clear
”。你的display: inline
是允许块级元素h1
破坏你的显示的原因,因为它重写了父元素的display: inline
。实际上,如果您使用Firebug或Chrome控制台进行检查,则会看到上述计算结果为float: left
和display: block
,即使display: block
尚未明确声明。
参见:
由于每个人的谈话使图像和个人命名float: left;
http://jsfiddle.net/FqW9d/20/
顺便说一下,我真的很喜欢你在这里做的设置。所以,我把事情搞糟与源点: http://jsfiddle.net/FqW9d/22/
I feel its better to use -
img{
float:left;
}
#client-name{
display: table-cell;
zoom:1;/*For IE only*/
}
你不必像在浮法指定宽度。它会自动适应不同长度的文本。
我已经更新了你的代码 - http://jsfiddle.net/FqW9d/27/
但我认为你的结构& CSS可能会更加简单。由于我不知道这个目的,所以不要动它。
你不需要'h1'上的'float:left':http://jsfiddle.net/FqW9d/19/ – 2012-02-18 16:34:02