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/