css佈局標題

我是網頁設計新手，我以爲我掌握瞭如何進行佈局的想法。我很難在佈局中正確定位圖像以製作正確的標題。css佈局標題

張貼的圖像是我想要實現的。我發佈了我寫的代碼，這是完全錯誤的。任何幫助表示讚賞！ - 謝謝你

http://img220.imageshack.us/img220/7097/helpcopy.jpg）

HTML

<div id="container"> 
    <div id= "header"> 
     <div id="leftimage"> 
      <img src="images/1.jpg" alt="" width="604" height="85" /> 
     </div> 

     <div id ="rightimage"> 
       <div id="verticalimage"> 
        <img src="images/2.jpg" alt="" width="29" height="85" /> 
       </div> 
       <div id="horizontalimages"> 
        <img src="images/3.jpg" alt="" width="182" height="32" /> 
        <img src="images/4.jpg" alt="" width="182" height="22" /> 
        <img src="images/5.jpg" alt="" width="182" height="31" /> 
       </div> 
     </div> 
    </div> 
</div>

CSS

body{ 
background: white; 
font-family: Arial, Helvetica, sans-serif; 
color:#7d806c; 
font-weight: bold; 
} 

#container{ 
width: 1000px; 
margin:0 auto; 
outline: 1px dashed red; 
} 
#leftimage{ 
width:604; 
height: 85; 
float: left; 
} 
#rightimage{ 
width: 211; 
height: 85; 
float: right; 
margin: 25px 0 0 0; 


} 
#verticalimage{ 
width:29; 
height:85; 
float:left; 

} 
#horizontalimages{ 
width:182; 
height:85; 
float: right; 
}

來源

2011-11-07 user1020045

輸出什麼你正在與現有的CSS？。 – punit

我只能得到左圖像（604x85）以顯示 – user1020045

你忘了添加px你的CSS寬度/高度聲明的結尾。隨着一些重新格式的浮游物，我想出了這個： http://jsfiddle.net/4gddY/。

仍試圖找出水平圖像之間的間距問題。

編輯：設置圖像到display: block工作。 http://jsfiddle.net/4gddY/1/

這裏是CSS：

body{ 
    background: white; 
    font-family: Arial, Helvetica, sans-serif; 
    color:#7d806c; 
    font-weight: bold; 
} 
#container{ 
    width: 1000px; 
    margin:0 auto; 
    outline: 1px dashed red; 
} 
#leftimage{ 
    width:604px; 
    height: 85px; 
    float: left; 
} 
#rightimage{ 
    width: 211px; 
    height: 85px; 
    margin: 25px 0 0 auto; 
} 
#verticalimage{ 
    width:29px; 
    height:85px; 
    float:left; 
} 
#horizontalimages{ 
    width:182px; 
    height:85px; 
    margin-left: auto; 
} 
img { 
    display: block; 
}

來源

2011-11-07 04:55:50 Will

感謝幫助的人欣賞它 – user1020045

我只是腳本了這一點，通過看你的佈局。希望它能幫助你弄清楚如何管理浮點數。輸出：http://jsfiddle.net/P3Sjk/

<html> 

<body> 

<style type="text/css"> 
* { margin:0px; padding:0px; } 
div.header{ width:1000px; } 
div.w604 { float:left; width:604px; height:85px; background-color:#65FF00; } 
div.w29 { float:right; width:29px; height:85px; background-color:#000000 } 
div.w182 { float:right; width:182px; height:85px; } 
div.h32 { width:182px; height:32px; background-color:#FFD800; } 
div.h22 { width:182px; height:22px; background-color:#FF4E00; } 
div.h31 { width:182px; height:31px; background-color:#6601FF; } 
</style> 

<div class="header"> 
    <div class="w604"></div> 
    <!---whitespace--> 
    <div class="w182"> 
     <div class="h32"></div> 
     <div class="h22"></div> 
     <div class="h31"></div> 
    </div> 
    <div class="w29"></div> 
</div> 

</body> 
</html>

來源

2011-11-07 04:59:51 Salman

感謝您的幫助 – user1020045

頭沒有樣式，所以它沒有正確對齊div。並且px在「horizontalimages」類中缺失。添加下面的風格在你的CSS

#header {position:relative; background-color:#FFF} 
#horizontalimages{width:182px; height:85px; float: right;}

來源

2011-11-07 05:32:14 Sowmya

我不知道如何ü要顯示你的標題圖片

但我猜測

你試試這個

   <div id="horizontalimages"> 
       <img src="Images/image3.jpg" alt="" width="182" height="32" /><br /> 
       <img src="Images/image4.jpg" alt="" width="182" height="22" /><br /> 
       <img src="Images/image5.jpg" alt="" width="182" height="31" /><br /> 
      </div>

來源

2011-11-09 13:49:21

回答

相關問題