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

css布局标题

回答

相关问题