具有流动宽度和高度的列

Question

我在制作包含 5 列和流体的垂直条时遇到问题 width/height。我想要的是当页面缩小时高度增加，因此每列中的文本仍在栏中。

这是我应该的样子和我拥有的：

现在，如果我的屏幕变小，文本就会出现在栏外，这不是我想要的。我也无法获得相等的列宽。有 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：（感谢 Ruddy 和 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;
}

这让我明白了：

有没有机会在它增长时修复它，active-step 背景也应该增长？由于 19%.

，我在右边还有一个小列

Answer 1

您 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/

Answer 2

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

要解决此问题，您必须将所有 parent 元素设置为 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。

具有流动宽度和高度的列

Columns with fluid width and height

html

css

multiple-columns

fluid-layout