Столбцы с шириной и высотой жидкости

У меня возникли проблемы с созданием вертикальной полосы с 5 колонками и шириной и высотой жидкости. Я хочу, когда страница сжимается, высота растет, поэтому текст в каждом столбце все еще находится в панели.Столбцы с шириной и высотой жидкости

Это то, что я должен выглядеть и что у меня есть: vertical bar

Теперь, если экран становится меньше текст выходит наружу бара и то не то, что я хочу. Также я не могу получить равные ширины столбцов. Есть 5 столбцов, которые должны быть равны более 100% ширины, но 20% не работают.

HTML:

<div id="wizard-steps"> 
<div class="wizard-header float-left">Kaderings analyseaanvraag</div> 
<div class="wizard-header float-left">Specificaties analyses : Type staal/stalen</div> 
<div class="wizard-header float-left">Specificaties analyses : Te bepalen componenten</div> 
<div class="wizard-header float-left">Specificaties analyses : Tijdschema en aantal stalen</div> 
<div class="wizard-header float-left">Data-analyse</div> 
</div>

CSS:

#wizard-steps { 
border-radius: 3px; 
border: 2px solid #a2c61c; 
width: 100%; 
height: 20px; 
margin: 0 auto; 
position: relative; 
} 

#wizard-steps div { 
    border-right: 2px solid #a2c61c; 
    width: 19%; 
    height: 20px; 
    text-align: center; 
    cursor: pointer; 
    float: left; 
} 

    #wizard-steps div:last-child { 
     border: white; 
    } 

.active-step { 
background-color: #a2c61c; 
color: white; 
}

Любая помощь будет высоко ценится!

ОБНОВЛЕНО CSS: (Thx к Радди & пантеру)

#wizard-steps { 
border-radius: 3px; 
border: 2px solid #a2c61c; 
width: 100%; 
display: table;

}

#wizard-steps div { 
    border-right: 2px solid #a2c61c; 
    width: 19%; 
    text-align: center; 
    cursor: pointer; 
    display: table-cell; 
} 

    #wizard-steps div:last-child { 
     border: white; 
    } 

.active-step { 
background-color: #a2c61c; 
color: white; 
}

Который получает меня это:

enter image description here

Любой шанс фиксации когда он растет, фон активного шага также должен расти? Также у меня есть небольшая колонка справа из-за 19%.

источник

2015-01-21 Nanou Ponette

Что-то вроде этого? [Demo] (HTTP: // jsfiddle.net/e63bhd5c /) – Ruddy

Это именно то, что я хочу @Ruddy –

Вы стоите display: table/table-cell значения для контейнера и внутренних разделителей. И удалите их высоты и поплавки.

#wizard-steps { 
    border-radius: 3px; 
    border: 2px solid #a2c61c; 
    width: 100%; 
    position: relative; /* you can remove that too */ 
    display: table; 
    /* margin: 0 auto isn't necessary when width is 100% */ 
} 

#wizard-steps div { 
    border-right: 2px solid #a2c61c; 
    width: 19%; 
    text-align: center; 
    cursor: pointer; 
    display: table-cell; 
} 

#wizard-steps div:last-child { 
    border: white; 
} 

.active-step { 
    background-color: #a2c61c; 
    color: white; 
}

http://jsfiddle.net/ew0ku220/

источник

2015-01-21 08:50:00 panther

Вот как я это сделал (оставьте комментарий) + 1. – Ruddy

Распространенным заблуждением в HTML/CSS является то, что "100%" означает, что "100% окна браузера". Вместо этого это означает «100% от ширины моего родителя». Поэтому вам нужно проверить, что такое ширина родителя #wizard-steps. Я предполагаю, что это элемент <body>, который не имеет ширины - чтобы он мог расти, чтобы соответствовать контенту.

Чтобы исправить это, необходимо установить все родительские элементы в width: 100%;, в том числе и <body>html:

body, html { width: 100%; }

Далее вы установите высоту. Если вы это сделаете, элемент не сможет расти вертикально. Удали это.

источник

2015-01-21 08:53:33

Как вы думаете, что такое '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' ' '? – panther

@panther: 'auto'. –

нет, их стиль по умолчанию - 'display: block;' (и 'margin' для' body'), а элементы блока имеют ширину 100%. Автоматическое значение отсутствует. – panther

Я бы использовал Bootstrap для этого. Там вы можете просто сделать что-то вроде этого:

<div class="container-fluid"> 
<div class="row" id="wizard-steps"> 
<div class="col-md-2">Kaderings analyseaanvraag</div> 
<div class="col-md-2">Specificaties analyses : Type staal/stalen</div> 
<div class="col-md-2">Specificaties analyses : Te bepalen componenten</div> 
<div class="col-md-2">Specificaties analyses : Tijdschema en aantal stalen</div> 
<div class="col-md-2">Data-analyse</div> 
</div> 
</div>

Внутри контейнера можно использовать .row для создания новых строк и .col-md-* для определения столбца. Изменение номера придаст вашей колонке другой размер. Все столбцы вместе не должны быть выше 12.

источник

2015-01-21 08:55:06

Я пробовал использовать bootstrap, но он сталкивается со многими другими css. К сожалению, это был не вариант :( –

Столбцы с шириной и высотой жидкости

ответ

Смежные вопросы