我怎样才能在css和html中制作这样的标题[关闭]答案

【问题标题】：How can I make a header like this in css and html [closed]我怎样才能在css和html中制作这样的标题[关闭]
【发布时间】：2013-05-19 18:14:58
【问题描述】：

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

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

【问题讨论】：

图片太棒了+1
@Jawad +1 因为这个原因？？ o.O
@Saching 承认吧，画面太棒了！
@SachinG：看看图片吧。你的线框从窗外走出来了。
忘记 html，整个互联网应该设计在方格纸上。那就是那里的新 Facebook。

标签： html css header profile image

【解决方案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/

【讨论】：

@Jawad 有什么好笑的？ :o
图片人，图片！
我认为是你为他编写了所有 OP 的代码。
@JimHurley：没有。我自己对此感到内疚。这是图片，是整个图片，只有图片！

【解决方案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;
}

【讨论】：

请不要投赞成票。这张照片让我这么做了。