Question

<div style="width:100%;">
<div style="background-image:url('../images/navi/top-red.png'); float:left;"></div>
<div style="width:180px; float:left;"><img src="/images/navi/logo.jpg" style="width:178px; height:62px; float:right; border:0;" /></a></div>
<div style="width:800px; float:left; background-image:url('../images/navi/top-black.png');"><ul id="topnav" style="">NAVI LINKS</ul></div>
<div style="background-image:url('../images/navi/top-black.png');float:left;"></div>
</div>

我想要实现的是...... 宽度：180px和宽度：800px = 980px始终以浏览器为中心左边和右边没有内容（只有FLUID宽度的背景渐变图像）：

--------------------------------- width：100％浏览器--------- --------------------

| top-red.png FLUID |宽度：180px-LOGO.jpg |宽度：800px-NAVI链接| top-black.png FLUID |

--------------------------------- width：100％浏览器--------- --------------------

我正在尝试为我的网站构建一个全宽度100％的顶级导航菜单。

中心内容固定为980px
中心内容包括a）徽标图片和b）导航链接
左侧空间填充top-red.png作为背景图像
右侧空格填充top-black.png作为背景图像

我一直在尝试使用3和4个DIV（每个1 DIV有4个div，如果logo和navi），但是第1个最左边的div WIDTH没有填满所有可用空间而且背景图像只产生了一点点。
例如。如果我在DIV中键入一串单词，背景图像将仅延伸到单词串的长度。

我放弃并最终成功使用TABLE标签（见下文）
'1st TD'将自动填充所有可用的WIDTH触及'2nd TD' 可以看到这个：

enter image description here

..但我仍然希望有人可以通过DIV标签告诉我如何使用DIV标签！

<table border="0" cellspacing="0" cellpadding="0" style="width:100%;">
  <tr>
    <td style="background-image:url('../images/navi/top-red.png'); height:62px;">&nbsp;</td>
    <td style="height:62px; width:180px; padding-right:10px;"><a href="/"><img src="/images/navi/logo.jpg" alt="LOGO IMAGE" style="width:178px; height:62px; border:0;" /></a></td>
    <td style="height:62px; width:800px; background-image:url('../images/navi/top-black.png')">NAVI MENU</td>
    <td style="background-image:url('../images/navi/top-black.png'); height:62px;">&nbsp;</td>
  </tr>
</table>

Answer 1

好的，这是我的尝试，我使用.container元素作为980px居中部分然后我使用:before和:after伪元素来创建流体部件并定位它们绝对。另外我使用CSS3渐变而不是背景图像（我在答案中省略了渐变代码以节省空间）

<强> Demo fiddle

<强> HTML

<header>
    <div class="container">
        <div class="navbar"> 
            <a href="#" id="brand">
                <img id="logo" src ="http://placehold.it/180x50"/>
            </a>
            <ul class="nav">
                <li><a href="#">Menu 1</a></li>
                <li><a href="#">Menu 2</a></li>
                <li><a href="#">Menu 3</a></li>
                <li><a href="#">Menu 4</a></li>
            </ul>
        </div>
    </div>
</header>

<强> CSS

body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}
.container {
    width: 980px;
    margin: 0 auto;
    height: 62px;
    position: relative;
}
.container:before, .container:after {
    content:'';
    display: block;
    position: absolute;
    width: 9999px; /* a large number to fill remaining space*/
    height: 62px;
    top: 0;
}
.container:after {
    left: 100%;
    background-color: #000000;
    /* + black gradient background*/
}
.container:before {
    right: 100%;
    background-color: #AF0B00;
    /* + red gradient background*/
}
#brand {
    height: 100%;
    line-height: 62px;
    float: left;
    font-size: 0;
    width: 180px;
    text-align: center;
    padding-right: 10px;
    vertical-align: top;
    right: 100%;
    background-color: #AF0B00;
    /* + red gradient background*/
}
#logo {
    vertical-align: middle;
}
.navbar .nav:before {
    display: inline-block;
    content:'';
    height: 62px;
    width: 10px;
    background: #fff;
}
.navbar .nav {
    list-style:none;
    padding: 0;
    margin: 0;
    float: left;
    width: 790px;/*800-10 of logo padding*/
    height: 62px;
    background-color: #000000;
    /* + black gradient background*/
}
.navbar .nav li {
    list-style:none;
    display: inline-block;
    line-height: 62px;
    vertical-align: top;
}
.navbar .nav li a {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 12px;
    padding: 0 18px;
}

使用DIV而不是TABLE，但DIV宽度不会填充可用空间

1 个答案: