從包含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的調整中停止圖像

回答

相關問題