从包含DIV的调整中停止图像

我正在使用960网格系统的网站上工作。它与导航有关。而不是试图解释，我会告诉你的东西我要为从包含DIV的调整中停止图像

enter image description here 我想这样做是有一个DIV叫navHolder一种在屏幕上绵延整条路上的最佳方法图片。 navHolder内部是一个带有一个容器类的div，它保存在960系统中。我会给navHolder一个顶部和底部边框来实现效果。

下面是HTML

<div id="navHolder"> 
    <div class="container_12"> 
     <div class="grid_4" id="leftNav"> 
      <ul class="leftNav"> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">ABG Way</a></li> 
      </ul> 
     </div> 
     <div class="grid_4" id="logo"> 
      <img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/> 
     </div> 
     <div class="grid_4" id="rightNav"> 
      <ul class="rightNav"> 
       <li><a href="#">Portfolio</a></li> 
       <li><a href="#">Media</a></li> 
      </ul> 
     </div> 
     <div class="clear"></div> 
    </div> 
</div>

的问题是图像的力量navHolder变大，所以顶部和底部边框失去应有的效果。

这里是图像的截图使它太大

Screenshot

enter image description here

我试图给图像的

position:absolute

从调整股利停止。然而，这会导致导航选项在其后面崩溃。下面是截图

enter image description here

我试图创建一个小提琴重现这种情况下

Fiddle

但它不太一样。

我的问题是，有没有办法设置这个图像，以便它不会调整其包含的DIV，并仍然保持它的位置与导航，所以它在图像的两侧？有没有更好的方法去解决这个问题，然后我现在正在做什么？

来源

2014-04-08 onTheInternet

链接到本地CSS文件和图像不会在拨弄你的工作小提琴...... 你分享的图片和你提供的小提琴是两种不同的东西...请复制CSS并粘贴在小提琴所属的位置，并尝试提供在线链接到图像.. –

我给容器<div>所需的大小和设置图像，因为它的背景不repeat而不是使用<img>，并应用background-size: 100%;

查找到更CSS Background Properties @ MDN

来源

2014-04-08 15:58:37

我会去这个通过重写该网格（仅适用于导航）。

所以这将是

#navHolder .grid_4 
{ 
float:none; 
display:inline-block; 
vertical-align:middle; 
}

您还需要抵消随机空白显示：inline-block的给出这样设置父包装的字体大小，在这种情况下#navHolder字体大小：0 ;

#navHolder 
{ 
font-size:0px; 
}

这里是我的变化 http://jsfiddle.net/bCzK5/4/

来源

2014-04-08 16:11:15

从包含DIV的调整中停止图像

回答

相关问题