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

Question

我希望它的左侧有一张个人资料图片，右侧有黑色边框。我想要左侧有另一张图片，左侧有边框，我想要我的徽标在中间。图片是 82 像素 x 82 像素，整个标题是 100% x 82 像素。你能用html和css为我写这个吗？

这是一张我希望它看起来像 http://s1167.photobucket.com/user/unlivedears/media/image-10.jpg.html的图片

Answer 1

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/

Answer 2

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;
}