基本的CSS佈局

-1

我有一個容器div爲900px寬的頁面，頁邊距是自動的。我有一個標題標籤在這個150px高。基本的CSS佈局

我希望標題由左側的ann圖像，右側的一些文本和另一個圖像（與左側的想象圖相對）組成。當我在標題div中放置兩個img標記時，第二個圖像比第一個低。我試圖修改內聯顯示沒有任何運氣。

任何想法？

CSS

html, body { 
    background-color: #ccd6cc; 
    margin: 0px; 
    padding: 0px; 
} 

body { 
    font-family: Arial, Helvetica, Verdana, Sans-serif; 
    font-size: 12px; 
    color: #666666; 
} 


.hidden { 
    display: none; 
} 


#page-container { 
    width: 900px; 
    margin: auto; 
    background-color: white; 
} 



#header { 
    height: 150px; 
    background-color: yellow; 
} 


#content { 
    line-height: 18px; 
} 

img#mcclogo { 
    display:inline; 
    float:left; 
    margin:0; 
    padding:0; 
} 

img#bactulogo { 
    display:inline; 
    float:right; 
    margin:0; 
    padding:0; 
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html lang="en" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> 
<script type="text/javascript" src="curvy.corners.trunk.js"></script> 
<head> 
    <title>Intranet Layout</title> 
    <link rel="stylesheet" type="text/css" href="test_layout.css" media="screen" /> 
</head> 
<body> 

<div id="page-container"> 
    <div id="header"> 
    <img id="mcclogo" src="../images/logo.gif" alt="xx" width="244" height="48" /> 
    <img id="bactulogo" src="../images/bactu3.gif" alt="xx" width="260" height="124" /> 
    </div> 



    <div id="content"> 
    Content 
    </div> 
</div> 
</body> 
</HTML>

來源

2012-08-16 Ben Hamilton

如果您在[jsfiddle]（http://jsfiddle.net） – PeeHaa 2012-08-16 14:25:20

上發佈了您的相關代碼，並且可能演示了您是否嘗試將它們浮動，那真的會有幫助嗎？ – 2012-08-16 14:25:21

用HTML和CSS更新您的文章 – Chandrakant 2012-08-16 14:27:47

假設HTML是正確的，http://jsfiddle.net/sbAvB/

CSS應該是這樣的，那麼：

#main{ 
    width:900px; 
    margin: auto; } 

#header{ 
    height:150px; 
    width:100% 
} 

#picL 
{ 
    float:left; 
} 

#text{ 
    position:absolute; 
    left:50%; 
    right:50%; 
    width:70%; 
} 

#picR 
{ 
    float:right; 
    margin-right:0px; }

李基利問題是缺乏在CSS屬性中設置的位置/保證金變量。要在一條線上對齊多個對象，一種方法是。

來源

2012-08-16 14:42:25 jos

我修改了我的代碼，所以它與此非常相似，但仍然沒有運氣。第二張圖像（右側）顯示比左側低的圖像。 – 2012-08-16 14:46:56

然後可能發生的事情是你的html對象繼承其他更大的包含它們的對象的CSS元素。在我看來，最好的解決方案是下載Firebug（所有瀏覽器的擴展），它允許你右鍵點擊你的頁面和'檢查元素'來查看一切的CSS。你可以在那裏編輯它，直到它是正確的，然後複製在你的開發環境中更改後的代碼。 – jos 2012-08-16 14:49:26

我已將代碼複製到小提琴中，並且它完美地顯示，但不在IE8中，我很害怕！ – 2012-08-16 14:49:58

基本的CSS佈局

回答

相關問題