Question

因此,这里我有:

<div class="header">
  <div id="logo">
    <img src="logo.jpg">
  </div>
  <div id="title">
    <img src="title.png">    
  </div>
</div>

我需要将标题.png与原木相统一。 jpg留给他,但有一些dding。采用特别安全标准的最佳方式是什么?

Answer 1

.header {
  position: relative; /* so logo can be positioned inside this */
  text-align: center; /* to center the inline-block (title) */
  background: #eee;
  border: 1px solid #000;
  padding: 5px; /* as required */
}

#title {display: inline-block;}
#title {display: inline !ie7;} /* IE6/7 hack to make inline-block work */

#logo {
  position: absolute; 
  left: 5px; /* match the padding value */
  top: 5px; /* match the padding value */
}

这一概念是什么样?

Example Fiddle : HERE

如果以上是需要的看管,可以大大简化,删除(不需要扫描仪)来公正使用图像内容本身。

<div class="header">
  <img src="http://dummyimage.com/150x50/000/fff&text=LOGO" id="logo">
  <img src="http://dummyimage.com/350x50/DAD/fff&text=Title" id="title">
</div>

.header {
  position: relative; /* so logo can be positioned */
  text-align: center; /* naturally centre the title image */
  background: #eee;
  border: 1px solid #000;
  padding: 5px;
}

#logo {position: absolute; left: 5px; top: 5px;}

Example Fiddle : HERE

友情链接