Question

我正在使用960网格系统的网站上工作。它有导航问题。而不是试着解释，我会告诉你一张我要去的地方的照片

enter image description here 我认为最好的方法是让一个名为navHolder的DIV在整个屏幕上延伸。在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

阻止它调整div的大小。但是，这会导致导航选项在其后面崩溃。这是一个截图

enter image description here

我试图创建一个小提琴来重新创建这个场景

Fiddle

但它并不完全相同。

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

Answer 1

我将容器<div>设置为所需大小，并将图片设置为不带repeat的背景，而不是使用<img>，然后应用background-size: 100%;

了解更多CSS Background Properties @ MDN

Answer 2

我会通过覆盖网格（仅用于导航）来解决这个问题。

所以它会是

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

你还需要偏移随机空格显示：inline-block给出如此设置父包装的字体大小在这种情况下#navHolder font-size：0;

#navHolder
{
font-size:0px;
}

这是你改变我的小提琴 http://jsfiddle.net/bCzK5/4/

停止图像重新调整包含DIV的大小

2 个答案: