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

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

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

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

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

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

下面是一些替代设计，所以不用担心。 做这件事最好的方法是什么

编辑：这就是我现在得到的。它以960像素的速度工作，但是当你调整它的大小时，中间的div并没有停留在中间，因为有填充。当它太小时，它也会崩溃，变成两行

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

html

注意：滚动小提琴以查看效果
工作

html

注意：滚动小提琴以查看效果

---

正在工作

此处只需一个媒体查询。在下面的示例中，当窗口收缩时，黄色div将居中，直到620px，此时它将与粉色div一起滑动，直到520px，此时它将滚动。不确定你是在寻找这个还是@jhunlio的解决方案

html

---

fiddle

您应该只需要在此处进行一次媒体查询。在下面的示例中，当窗口收缩时，黄色div将居中，直到620px，此时它将与粉色div一起滑动，直到520px，此时它将滚动。不确定你是在寻找这个还是@jhunlio的解决方案

html

---

fiddle

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

---

当然，问题是第一个/最后一个元素是否不够大，无法容纳其子元素。因为中间元素绝对位于页面的中间位置，在620px断点处，不能有任何错误空间。

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

---

---

当然，问题是第一个/最后一个元素是否不够大，无法容纳其子元素。因为中间元素绝对位于页面的中间位置，在620px断点处，不存在任何错误空间。

看起来像你需要最大宽度一样，否则在左、右和中间的列之间永远不会有空白。在960px和740px视图中，中间的div居中，但在520px视图中，它向左偏离中心。在我看来，您希望左右列的宽度随着浏览器宽度的减小而增大，对吗？如果是这样的话，我不认为仅仅用CSS就可以做到这一点。你可能需要JavaScript。@乔伊普我添加了620px，这是它可能会改变的地方-直到那一点，中间的div是居中的。过了那个点，div将与右边的div对齐。所以我想我只需要设计从960px到620px。过了那一关，就很漂亮了easy@JudeOsborn不，它们看起来在增长，因为图像的大小被调整了。如果您感到困惑，请在新选项卡中打开图像。在我看来，您还需要一个最大宽度，否则在左侧和右侧的列与中间的列之间可能永远不会有空白。居中是什么意思？在960px和740px视图中，中间的div居中，但在520px视图中，它向左偏离中心。在我看来，您希望左右列的宽度随着浏览器宽度的减小而增大，对吗？如果是这样的话，我不认为仅仅用CSS就可以做到这一点。你可能需要JavaScript。@乔伊普我添加了620px，这是它可能会改变的地方-直到那一点，中间的div是居中的。过了那个点，div将与右边的div对齐。所以我想我只需要设计从960px到620px。过了那一关，就很漂亮了easy@JudeOsborn不，它们看起来在增长，因为图像的大小被调整了。如果您感到困惑，请在新选项卡中打开图像。这是我想要的，但我需要它是流动的，而不仅仅是在某些阈值下更改。您说您想要

960px包装器

，但如果您想要它更流动的布局，只需将

960px

消除到

100%

这是我想要的，但我需要它是流动的，不只是在某些阈值下更改。您说您想要

960px包装器

，但如果您想要它更流畅的布局，只需将

960px

消除到

100%

这正是我想要的。。但这只是把黄色的一直粘在粉红色的上面？这正是我想要的。。但这只是把黄色的一直粘在粉红色的上面？做得很好！也非常好和简单，只有3个div，并且顺序正确。谢谢！干得好！也非常好和简单，只有3个div，并且顺序正确。谢谢！

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

.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;
    }
}

<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>

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; 
  }
}

<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;
}