0

我正在构建一个基于1140 CSS Grid的网站，这是一个完全流畅的网格，最大宽度设置为 1140px。我已经在该层上放置了将要成为导航栏的内容，该导航栏在每侧进一步延伸五个像素（对于每个人最喜欢的“丝带”设计效果），并且希望中间的 1140 像素（现在的 1150 像素导航）可以调整宽度与它下面的网格。然而，到目前为止我所尝试的一切都没有奏效。有人有想法么？

HTML：

<div class="float">
<div class="nav">
    <div class="navleft">
    <img src="images/banneredgel.png"/>
    </div>
    <div class="navbar">
    </div>
    <div class="navright">
    <img src="images/banneredger.png"/>
    </div>
</div>
</div>

CSS：

.float {
width: 100%;
display: inline block;
overflow: hidden;
position: fixed;
}

.nav {
width: 100%;
height: 43px;
max-width: 1150px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}

.navleft {
float: left;
width: 5px;
height: 43px;
}

.navbar {
float: left;
width: 100%;
max-width: 1140px;
height: 38px;
background-color: #6fd0f6;
}

.navright {
float: left;
width: 5px;
height: 43px;
}
4

2 回答 2

1

我用你的答案创建了一个 JS fiddle。 http://jsfiddle.net/thinkingsites/Vz4TC/3/

您的问题是宽度 100% 不允许侧面的两位，因此当您的页面缩小时，它会包裹 .nav 的子项

我所做的是将它们绝对定位在 .nav 中，并给 .navbar 一个左右边距以允许色带而不将其设置为 width:100%，因为这会将色带推开。我还将 .nav 的最大宽度设置为 800，并且导航永远不会超出此范围。

于 2012-05-22T19:32:18.313 回答
0

我能够采用 Thinking Sites 提供的代码并对其进行多行更改，以便在宽度小于浏览器（边缘上的丝带）时悬停在中心上方，然后在网站流畅地调整到较小的浏览器宽度。

HTML：

<div class="float">

        <div class="navleft">
        <img src="images/banneredgel.png">
        </div>

        <div class="navbar">
        <img src="images/logo.png" class="logo"/>
        </div>

        <div class="navright">
        <img src="images/banneredger.png">
        </div>
</div>

CSS：

.float {
width: 100%;
max-width: 1140px;
height: 38px;
position: fixed;
}

.navbar {
background-color: #6fd0f6;
height: 38px;
padding-left: 5px;
padding-right: 5px;
}

.navright,.navleft { 
width: 5px; 
height: 43px;
position: absolute;
top: 0px;
}

.navleft{
left: -5px;
}

.navright{
right: -5px;
}
于 2012-05-23T16:51:03.140 回答