css - CSS响应式设计问题

Question

我正在制作一个反应式网站；这意味着它会随着窗口重新调整大小。一切都很顺利，直到我点击导航栏，它的左下角和右下角有一条 15px 的曲线，宽度为 100%。我想在（充当包装器）divNavCap的任一侧放置两个我调用的20px div。Nav这很容易，让我可以隔开按钮并在末端添加图像。调用的中间部分NavAction将有一个 1px 的重复背景图像，以便它在粗糙的服务器上加载超快。

问题是它NavAction需要占用尽可能多的空间，而不会将右边NavCap推到下一条隐藏线上。这是我的代码：

#nav {    
   width: 100%;
   height: 55px;
   position: relative;
   bottom: 0;
   overflow: hidden;
   background-color: #020202;
   -webkit-border-radius: 0px 0px 15px 15px;
   -moz-border-radius: 0px 0px 15px 15px;
   border-radius: 0px 0px 15px 15px;    
}

#nav * {    
   box-sizing: border-box;
   height: 100%;    
}

#navCap {    
   width: 20px;
   height: 55px;
   float: left;
   background-color: blue;    
}

#navAction {    
   width: 97.91%;
   height: 55px;
   float: left;
   padding: 0;
   background-color: green;    
}

        <div id="nav">                
            <div id="navCap"></div>                
            <div id="navAction">

            </div>                
            <div id="navCap" class="right"></div>

        </div>

Answer 1

不要有两个具有相同值的 id navCap。

不要给navActiona 宽度，而是给它一个left和right值：

#navAction {
    position         : absolute;
    left             : 20px;
    right            : 20px;
    top              : 0;
    height           : 55px;
    background-color : green;
}

然后像这样设置你的上限：

#navCapLeft, #navCapRight {
    width            : 20px;
    height           : 55px;
    position         : absolute;
    top              : 0;
    background-color : blue;
}
#navCapLeft {
    left : 0;
}
#navCapRight {
    right : 0;
}

Answer 2

这是另一个简单的解决方案：

<div id="nav">
    <div class="left"></div>
    <div class="right"></div>
</div>

#nav {
    width: 100%;
    height: 55px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 0px 0px 15px 15px;
    -moz-border-radius: 0px 0px 15px 15px;
    border-radius: 0px 0px 15px 15px;
    background-color: green;
}
#nav * {
    box-sizing: border-box;
    height: 100%;
}
.left,
.right {
    width: 20px;
    height: 55px;
    position: absolute;
    background-color: blue;
}
.left {
    left: 0;
}

.right {
    right:0;
}