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

Question

真的为如何实现这一点而苦苦挣扎。

我想做一个导航栏，以页面为中心 960px。此导航栏中有 3 个不同的部分或列。最左边的最小，200px。中间的总是居中，总是 20px。最右边的最小为 300 像素，并与右侧对齐。在完整的 960 像素处，它看起来像这样：

在 740 像素时，它看起来像这样：

在 620 像素时，它看起来像这样：

在 520 像素时，它看起来像这样：

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

编辑：这就是我目前所拥有的。它在 960 像素处工作，但是当你调整它的大小时，中间的 div 不会停留在中心，因为有填充。当它变得太小时，它也会分崩离析，变成 2 行。

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

Answer 1

您应该只需要一个媒体查询。在下面的示例中，当窗口缩小时，黄色 div 将居中直到 620 像素，然后它会与粉色 div 一起滑动，直到 520 像素才会滚动。不确定您是在寻找这个还是@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/

Answer 2

这是一个棘手的问题，因为它确实需要像素完美的媒体查询才能完成：

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 3

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