HTML/CSS - Отзывчивая панель навигации на 3 столбца

Question

Действительно борется с тем, как это реализовать.

Я хочу сделать навигационную панель, 960px с центром на странице. В этой навигационной панели находятся 3 разных раздела или столбцы. Крайний левый - минимум, 200 пикселей. Середина ВСЕГДА сосредоточена, и всегда 20px. Крайний правый - минимум 300 пикселей и выравнивается вправо. В полном 960px, было бы выглядеть следующим образом:

В 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

Вы должны только один Medi запрос здесь. В примере ниже, когда окно сжимается, желтый 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/