具有流体宽度和高度的列答案

【问题标题】：Columns with fluid width and height具有流体宽度和高度的列
【发布时间】：2015-03-19 17:13:43
【问题描述】：

我无法制作一个有 5 列和流体宽度/高度的垂直条。我想要的是当页面缩小时高度增加，所以每列中的文本仍然在栏中。

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

现在，如果我的屏幕变小，文本会出现在栏之外，这不是我想要的。我也不能得到相等的列宽。有 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;
}

这让我明白了：

是否有可能修复它增长时，活动步骤背景也应该增长？由于 19%，我在右边还有一个小专栏。

【问题讨论】：

这样的？ Demo
这正是我想要的@Ruddy

标签： html css multiple-columns fluid-layout

【解决方案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/

【讨论】：

我就是这样做的（我发表了评论）+ 1。

【解决方案2】：

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

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

body, html { width: 100%; }

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

【讨论】：

你怎么看，htmls 和bodys 默认width是什么？
不，它们的默认样式是display: block;（margin 是body），块元素有 100% 的宽度。没有自动值。
@panther：我知道块元素的默认宽度为 100%，但由于某种原因，我不知道上面的代码确实改变了布局。
html 和 body 添加 100% 宽度的唯一区别是 body 更宽（100% + 2*8px 边距），因此滚动条显示为 16px，而 div 可以稍微宽一点（每个+3px），这样他们的内容就可以重新组织一下。我应该更新我的评论答案，块元素的宽度不是 100%，而是 100%-margins-paddings-borders。
@panther：如果你是对的（我听上去是正确的）：如果宽度是固定的，为什么内容可以让 body 比视口更宽？

【解决方案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。

【讨论】：

我尝试使用引导程序，但它与我的其他 css 冲突很多。不幸的是，这是没有选择的:(