Div将不会显示内联

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

来源

2012-02-18 Matthew Joseph Morris

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

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

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

来源

2012-02-18 16:28:05

你不需要'h1'上的'float：left'：http://jsfiddle.net/FqW9d/19/ – 2012-02-18 16:34:02

添加留给形象和包含名称的DIV的浮动，我已经更新在这里你的jsfiddle http://jsfiddle.net/FqW9d/15/

来源

2012-02-18 16:30:07

你也应该删除多余的'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/

来源

2012-02-18 16:30:21 Sotiris

内嵌显示器可以是有点疼痛。跨浏览器的方式是这样的...

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

来源

2012-02-18 16:30:50 gargantuan

你有以下结构（我已经添加了图片的网址，所以我们可以看到，元素）：

<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元素不是“在012之后强制clear”。你的display: inline是允许块级元素h1破坏你的显示的原因，因为它重写了父元素的display: inline。实际上，如果您使用Firebug或Chrome控制台进行检查，则会看到上述计算结果为float: left和display: block，即使display: block尚未明确声明。

参见：

来源

2012-02-18 16:40:59

由于每个人的谈话使图像和个人命名float: left; http://jsfiddle.net/FqW9d/20/

顺便说一下，我真的很喜欢你在这里做的设置。所以，我把事情搞糟与源点： http://jsfiddle.net/FqW9d/22/

来源

2012-02-18 16:43:08

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可能会更加简单。由于我不知道这个目的，所以不要动它。

来源

2012-02-18 17:06:53

Div将不会显示内联

回答

相关问题