Question

真的在努力实现这个目标。

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

在740px，它看起来像这样： enter image description here

在620px时，它看起来像这样： enter image description here

在520px，它看起来像这样： enter image description here

低于它，它会进入一些替代设计，所以不要担心。这样做的最佳方式是什么？

编辑：这就是我现在所拥有的。它工作在960px，但由于填充，中间div在你调整大小时不会留在中心。当它变得太小时，它也会分崩离析，直到2行。

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

Answer 1

您在这里只需要一个媒体查询。在下面的示例中，当窗口收缩时，黄色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/

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

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

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断点处的页面中间，所以不存在任何错误空间。

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

3 个答案: