Question

我在制作一个有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;
}

非常感谢任何帮助！

UPDATED CSS：（Thx to Ruddy＆amp; panther）

#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％，我右侧有一个小栏目。

Answer 1

容器和内部div的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/

Answer 2

HTML / CSS中常见的误解是＆＃34; 100％＆＃34;意味着＆＃34; 100％的浏览器窗口＆＃34;。相反，它意味着＆＃34; 100％的父母宽度＆＃34;。因此，您需要检查#wizard-steps的父级宽度。我的猜测是<body>元素没有宽度 - 允许它增长以适应内容。

要解决此问题，您必须将所有父元素设置为width: 100%;，包括<body>和html：

body, html { width: 100%; }

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

Answer 3

我会使用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。

具有流体宽度和高度的柱

3 个答案: