CSS：IMG的inline-block的排列

無論出於何種原因，這種形象使得標記的其餘部分未對齊內它的容器，儘管它被設置爲顯示inline-block的：CSS：IMG的inline-block的排列

對於你們應該很簡單。對我而言，我已經花了數天時間來解決這個問題。

順便說一下，我不想使用浮動。我不完全知道如何控制他們的怪異，沒有時間學習它。我會很感激，如果你可以請不要使用它們。但是，如果你把我引向一個涵蓋他們所有事故的人，我可以參加一個關於花車的速成班。

現在，我需要堅持一個非浮動的CSS。

PS。邊界是隻是爲了「調試」和是真的不necesary

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title></title> 
    <link rel="stylesheet" type="text/css" href="css_test2.css" /> 
</head> 
<body> 
<div id="header"> 
    <img src="http://img710.imageshack.us/img710/938/imgbz.png" id="logo"> 
    <a href="#" id="logo_txt">Title goes here</a> 
    <span id="social_media">Social media links</span> 
</div> 
</body> 
</html>

CSS：

#header { 
    border: 1px solid red; 

    width: 800px; 
    height: 123px; 
    margin: 0px auto; 
    padding: 0px; 

    background-color: rgb(181, 230, 29); 
    } 

#logo { 
    border: 1px solid red; 
    display: inline-block; 

    width: 172px; 
    height: 123px; 
    } 


#logo_txt { 
    border: 1px solid black; 
    display: inline-block; 

    width: 100px; 
    height: 123px; 
    } 
#social_media { 
    border: 1px solid black; 
    display: inline-block; 

    width: 300px; 
    height: 123px; 
    text-align: right; 
    }

來源

2012-06-07 Omar

解決這個問題的最快捷的方法是添加vertical-align: top到#logo風格。

來源

2012-06-07 03:37:47 sarcastyx

http://jsfiddle.net/ncQXD/7/ – Omar

float元素的左側和一切工作：http://jsfiddle.net/ncQXD/1/

我加這個CSS：

#header > * { 
    float: left; 
} 

#header { 
    overflow: auto; 
}

來源

2012-06-07 03:35:35 Blender

-1海報多次說他不想使用浮動。 – tjscience

我認爲沒有理由限制。你做？ – Blender

海報上陳述了限制原因。 – tjscience

添加

vertical-align:text-top;

到您的影像風格，vertical-align:top;會的工作太多，但我用文字頂部，因爲其對文本對齊

默認垂直對齊方式是底線，這將對齊圖像的底部與其他div中的文字。

FIDDLE

來源

2012-06-07 03:41:52 Musa

嗨，我如果以任何方式使用display inline-block比定義一個屬性

vertical-align:top;

因爲默認情況下性能是vertical-align:middle;所以比定義verticle-align性能。

現在SAM認爲img標籤定義您CSSverticel-align:top 您img標籤性能。

來源

2012-06-07 06:15:26

CSS：IMG的inline-block的排列

回答

相關問題