在div中放置文本和圖像彼此相鄰 - CSS

我試圖將一段文字放在包裝div內的圖像旁邊，但所有嘗試都失敗至今，並導致我使用圖像來完成我想要做的事情。我不會在代碼後我失敗的嘗試，以避免混亂，但我已經這麼遠：在div中放置文本和圖像彼此相鄰 - CSS

HTML

<html> 
    <head> 

    <link rel="stylesheet" href="/css/header.css" /> 

    </head> 

<meta http-equiv="Content-Type" content="text/html; charset=big5" /></head> 

<body style="margin:0; padding:0;"> 

<div id="wrapper"> 
    <div class="logo"><img src="/images/logo-top.png"></div> 
    <div class="linked"><a href="http://www.linkedin.com/in/me" target="_blank"><img border="0" src="/images/connect-linkedin.png" alt="LinkedIn Profile" width="217" height="23" /></a></div> 
</div> 


<div id="header-bg"> 
</div> 


</body> 
</html>

CSS

#wrapper { 
    postion: fixed; 
    width: 940px; 
    height: 66px; 
    top: 0; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    z-index: 1; 

} 



.logo { 
    height: 66px; 
    width: 171px; 
    float: left; 

} 

.linked { 
    height: 23px; 
    width: 217px; 
    margin-top: 12px; 
    margin-right: 0; 
    left: 0; 
    float: right; 

} 


#header-bg { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 50px;  
    background-image: url("/images/header-bg.png"); 
    background-repeat: repeat-x; 
    z-index: -1; 


}

哪產生此： http://oi46.tinypic.com/2vmd9v8.jpg

^這就是我爲了佈局而採取的行動，但是 - 我最終想要「連接到我」，而LinkedIn徽標分爲文本和徽標圖像，而不是一個圖像集合在一起。

非常感謝您的幫助。

來源

2012-06-17 Willard

首先，你需要刪除所有那些unisticary divs。製作bg-header一個div並將其更改爲一個類（假設bg-header是黑色條）。在該div中，將徽標和鏈接圖像放在那裏。通過爲bg-header類設置所需的左填充量，將浮動徽標圖像僅留下並移動徽標和鏈接。

像這樣

HTML

<div class="bg-header"> 
    <img src="/images/log-top.png> 
    <a href="http://www.linkedin.com/in/me" target="_blank"><img border="0" src="/images/connect-linkedin.png" alt="LinkedIn Profile" width="217" height="23" /></a> 
</div>

CSS

.bg-header { padding-left: /*Insert value here*/; } 
img { float: left; }

來源

2012-06-18 00:19:37 DrinkJavaCodeJava

我建議這個CSS移除填充：

.logo { 
height: 66px; 
width: 171px; 
float: left; 
padding: 0px; 
margin: 0px; 
border: 0px; 
} 
.linked { 
height: 23px; 
width: 217px; 
margin-top: 12px; 
margin-right: 0; 
left: 0; 
float: right; 
padding: 0px; 
margin: 0px; 
border: 0px; 
}

來源

2012-06-18 00:44:42 gabeio

在div中放置文本和圖像彼此相鄰 - CSS

回答

相關問題