HTML/CSS - 响应式3列导航栏

Question

真正在如何实现这一点挣扎。

我想制作一个导航栏，960px居中在页面上。在此导航栏中有3个不同的部分或列。最左边的是至少200px。中间的一直总是以20px为中心。最右边的一个至少为300像素，并与右侧对齐。在满960像素，它会是这样的：

在740px，它会是这样的：

在620px，它会是这样的：

在520px，它看起来像这样：

而在下面，它会进入一些替代设计，所以不用担心。 这样做最好的方法是什么？

编辑：这是我现在所拥有的。它的工作原理是960像素，但由于填充的原因，当您调整它的大小时，中间的div不会停留在中间位置。当它变得太小时，它也会崩溃，进入2条线。

.left { 
    float: left; 
    width: 300px; 
} 
.right { 
    float: right; 
    width: 400px; 
} 
.middle { 
    width: 100%; 
    padding: 0 100px; 
    height: 39px; 
} 

Answer 1

这是一个棘手的，因为它确实需要像素完美的媒体查询决绝：

http://codepen.io/cimmanon/pen/cmJhx

<nav> 
    <div class="a">a</div> 
    <div class="b">b</div><!-- 
    --><div class="c">c</div> 
</nav> 

注意注释掉空白^^

body { 
    margin: 0; 
    padding: 0; 
} 

@media (min-width: 520px) and (max-width: 620px) { 
    nav { 
    text-align: right; 
    } 

    nav div { 
    text-align: left; 
    display: inline-block; 
    } 

    .a { 
    float: left; 
    } 
} 

@media (min-width: 620px) { 
    nav { 
    position: relative; 
    overflow: hidden; 
    } 

    .a { 
    float: left; 
    min-width: 200px; 
    } 

    .b { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    margin-left: -10px; 
    } 

    .c { 
    float: right; 
    min-width: 300px; 
    } 
} 

/* colors! */ 

.a { 
    background: green; 
    min-width: 200px; 
} 

.b { 
    background: yellow; 
    width: 20px; 
} 

.c { 
    background: pink; 
    min-width: 300px; 
} 

的问题，当然，如果是你的第一个/最后一个元素是没有大到足以容纳他们的孩子。因为中间元素绝对位于620px断点处的页面中间，所以不会有任何错误空间。

Answer 2

HTML

<div class="navWrap"> 
    <div class="nav"> 
     <div class="navLeft"></div> 
     <div class="navCenterWrap"> 
      <div class="navCenter"></div> 
     </div> 
     <div class="navRight"></div> 
    </div> 
</div>  

CSS

.navWrap {margin:auto; width:960px;} 
.nav { 
    float:left; 
    width:100%; 
} 
.navLeft { 
    width:20%; 
    float:left; 
    padding:10px 0; 
    background-color:green; 
} 
.navCenterWrap { 
    margin:auto; 
    width:5%; 
} 
.navCenter { 
    float:left; 
    width:100%; 
    padding:10px 0; 
    background-color:yellow; 
} 
.navRight { 
    width:30%; 
    float:right; 
    padding:10px 0; 
    background-color:blue; 
} 

@media screen and (max-width: 740px){ 
    .navWrap { 
     width:100%; 
    } 
} 

@media screen and (max-width: 520px){ 
    .navWrap { 
     width:100%; 
    } 
    .navLeft { 
     width:40%; 
     margin:0; 
    } 
    .navCenterWrap { 
     width:5%; 
     float:left; 
    } 
    .navRight { 
     width:55%; 
     margin:0; 
    } 
} 

注：滚动小提琴看到效果
工作demo

Answer 3

你应该只需要一个中介在这里查询。在下面的例子中，当窗口缩小时，黄色div将居中显示，直到620px时，它将随着粉红色div一起滑动，直到520px滚动。不知道你是否在寻找这个或@ jhunlio的解决方案。

HTML

<div class="wrapper"> 
    <div class="left-col"></div> 
    <div class="inner-wrapper"> 
     <div class="middle-col"></div> 
     <div class="right-col"></div> 
     <br class="clean" /> 
    </div> 
</div> 

CSS

body{ 
    margin: 0px; 
} 
.clean{ 
    clear: both; 
} 
.wrapper{ 
    height: 100px; 
    position: relative; 
    min-width: 520px; 
} 
.inner-wrapper{ 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    width: calc(50% + 10px); 
    height: 100%; 
} 
.left-col{ 
    background: green; 
    width: 200px; 
    height: 100%; 
} 
.middle-col{ 
    width: 20px; 
    height: 100%; 
    float: left; 
    background-color: yellow; 
} 
.right-col{ 
    float: right; 
    width: 300px; 
    background: pink; 
    height: 100%; 
} 

@media screen and (max-width: 620px){ 
    .inner-wrapper{ 
    width: auto; 
    } 
} 

小提琴http://jsfiddle.net/BkFup/2/