流体宽度和高度的色谱柱

我无法制作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

这样的事情？ [演示]（HTTP：//的jsfiddle。net/e63bhd5c /） – Ruddy 2015-01-21 08:50:58

这正是我想要的@Ruddy – 2015-01-21 08:56:37

您display: table/table-cell容器和内部div的值。并消除他们的高度和浮动。

#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 2015-01-21 08:51:25

在HTML/CSS的一个常见的误解是， “100％” 是指 “在浏览器窗口的100％”。相反，它意味着“我的父母的宽度的100％”。所以你需要检查#wizard-steps的父项宽度是多少。我的猜测是那个没有宽度的<body>元素 - 允许它增长以适应内容。

为了解决这个问题，必须将所有的父元素width: 100%;，包括<body>和html：

body, html { width: 100%; }

接下来，设置的高度。如果你这样做，那么一个元素不能垂直增长。删除这个。

来源

2015-01-21 08:53:33

你认为，什么是'html'和'身体的默认'宽度'？ – panther 2015-01-21 08:55:38

@panther：'auto'。 – 2015-01-21 09:03:15

不，它们的默认样式为'display：block;'（'body'为'margin'），并且块元素的宽度为100％。没有自动值。 – panther 2015-01-21 09:07:06

我会用这个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碰撞。这是不幸的选择:( – 2015-01-21 08:57:38

流体宽度和高度的色谱柱

回答

相关问题