码迷,mamicode.com
首页 > 其他好文 > 详细

左侧图片 右侧块的实现方法---解决3像素bug的一种解决方案,不用浮动用绝对定位和margin-left

时间:2014-05-25 03:50:29      阅读:404      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   c   tar   ext   

bubuko.com,布布扣

google的实现方式是:

<div class="mw">

  <a href="/" id="mlogo">  </a>

  <div id="tsfi" style="zoom:1"></div>

</div>

图片可以作为a标签的背景或者嵌套子a标签里面,为a标签设置绝对定位,右面搜索框为正常块,为右面的搜索框设置margin-left即可

具体如下,也可直接去看google搜索页

.mw{

  max-width:100%;

}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi)
 
#mlogo {

  background-imageurl(/images/logo_mobile_srp_highres_3.png);

}
#mlogo {
  backgroundurl(/images/logo_mobile_srp_3.png) no-repeat;
  background-size75px 26px;
  colortransparent;
  width75px;
  height26px;
  left9px;
  positionabsolute;
  text-aligncenter;
  top8px;
}
#tsfi {
  margin-left102px;
  -webkit-transitionall .15s;
}

左侧图片 右侧块的实现方法---解决3像素bug的一种解决方案,不用浮动用绝对定位和margin-left,布布扣,bubuko.com

左侧图片 右侧块的实现方法---解决3像素bug的一种解决方案,不用浮动用绝对定位和margin-left

标签:style   class   blog   c   tar   ext   

原文地址:http://www.cnblogs.com/mabelstyle/p/3750341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!