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將不會顯示內聯

回答

相關問題