如何在css和html中制作这样的标题

Question

我希望它的左侧有一个个人资料图片，右侧有一个黑色边框。我需要在左侧的另一张图片左侧边框，我希望我的标志在中间。图片大小为82像素×82像素，整个标题为100％×82像素。你可以在html和css中为我写这个吗？

这里它的知情同意，我希望它看起来像 http://s1167.photobucket.com/user/unlivedgears/media/image-10.jpg.html

Answer 1

HTML

<div id="header"> 
<div id="profile_picture"> 
    <img src="profile_picture.jpeg" alt="Profile Picture" height="82" width="82" /> 
</div> 
<div id="another_picture"> 
    <img src="another_picture.jpeg" alt="Another Picture" height="82" width="82" /> 
<div> 
<div id="logo"> 
    <img src="logo.jpeg" alt="Logo" height="X" width="Y" /> 
</div> 
</div> 

CSS

* 
{ 
padding: 0; 
margin: 0; 
border: 0; 
} 

div#header 
{ 
height: 82px; 
width: 100%; 
overflow: auto; 
} 

div#profile_picture 
{ 
float: left; 
border-right: Xpx; 
} 

div#another_picture 
{ 
float: left; 
border-left: Xpx; 
} 

div#logo 
{ 
float: right; 
width: Xpx; 
height: Xpx; 
} 

Answer 2

HTML

<div class="header"> 
    <div class="img l"></div> 
    <div class="img r"></div> 
    <div class="img logo"></div> 
</div> 

CSS

.header{ 
    background:red; 
    width:100%; 
} 

.img{ 
    width:50px; 
    height:50px; 
    background:blue; 
} 

div.l{ 
    float:left; 
    border-right:5px solid black; 
} 

div.r{ 
    float:right; 
    border-left:5px solid black; 
} 

div.logo{ 
    width:200px; 
    margin:0 auto; 
} 

看到这里的工作例如：http://jsfiddle.net/sDVGc/