4

大图：我正在尝试制作由离散单元组成的条形图。每个单元将是一个 div。酒吧将从下到上增长。

详细信息：我有一个包含所有单元 div 或块的容器 div。容器具有底部的垂直对齐来执行此操作。

这应该是这样的：https ://jsfiddle.net/hpf4h/1/

<div id="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

#container {
    height: 100px;
    width: 10px;
    padding: 1px;
    background-color: #00f;
    
    display: table-cell;
    vertical-align: bottom;
}

.block {
    height: 10px;
    width: 10px;
    margin: 1px 0px 1px 0px;
    background-color: #0f0;
}

这很好用，但我需要容器的高度为 100%。这使得这种情况发生：https ://jsfiddle.net/7n7ZH/1/

我更愿意找到一种使用 CSS 的方法，最好不要太 hacky。我已经在我的项目中使用了 jQuery，所以我可以将它作为最后的手段。

编辑：此外，所有父标签的高度也为 100%，包括 HTML 和正文。

4

3 回答 3

2

像这样制作#container 的容器元素display:table：https ://jsfiddle.net/7n7ZH/2/

html, body { height: 100%; margin:0; }

body { display:table; }

#container {
    height: 100%;
    width: 10px;
    padding: 1px;
    background-color: #00f;
    
    display: table-cell;
    vertical-align: bottom;
}

.block {
    height: 10px;
    width: 10px;
    margin: 1px 0px 1px 0px;
    background-color: #0f0;
}
<div id="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

当您使用display:table-cell浏览器时，会寻找祖先元素display:table-row,display:table-row-group和display:table. 如果找不到它们，它会创建伪元素来代替它们。这就是这里发生的事情。

所以当你说 时display:table-cell; height:100%，那是 100% 创建的伪元素，即display:table. 但是那个伪元素只和它的内容一样高，并且在 CSS 中没有办法说“让伪元素的高度是其父元素高度的 100%”。

但是可以有一个真实元素display:table并将其高度设置为 100%，在这种情况下浏览器将使用它而不创建display:table伪元素。

于 2013-05-19T19:44:38.577 回答
1

应用display:table-cell;并height同时很少会产生您期望的结果。我看到您正在尝试使用vertical-align这可能是您添加table-cell. 尝试使用 css 定位：

从您的容器中移除display:table-cell;和。vertical-align

添加height:100%;到body和html元素中，以便您的容器有增长空间。

将容器设置为position:relative;使其成为所有定位子项的原点，而不是文档根（正文标记）。这将允许您移动容器而不会弄乱子位置。

在你的块周围添加一个包装器（你可以使用 ul, li 而不是 div）。

将块容器定位为position:absolute; bottom:0;

这是代码...

#container {
    height: 100%;
    width: 10px;
    padding: 1px;
    background-color: #00f;
    
    position:relative;
}
.blockContainer
{
    position:absolute;
    bottom:0px;
}
.block {
    height: 10px;
    width: 10px;
    margin: 1px 0px 1px 0px;
    background-color: #0f0;
}

body { height:100% }
html { height: 100%}#container {
    height: 100%;
    width: 10px;
    padding: 1px;
    background-color: #00f;
    
    position:relative;
}
.blockContainer
{
    position:absolute;
    bottom:0px;
}
.block {
    height: 10px;
    width: 10px;
    margin: 1px 0px 1px 0px;
    background-color: #0f0;
}

body { height:100% }
html { height: 100%}

...这是小提琴...

https://jsfiddle.net/kPEnL/1/

于 2013-05-19T18:42:36.540 回答
0

我无法按照您开始的方式提供帮助，但是以尝试制作垂直进度条的原始大图为例，这是使用Twitter Bootstrap 中的进度条的替代方案。在其现有形式中，它不做垂直进度条，但这个修改做了。

我最初建议使用堆叠条，但这不适用于垂直实现。相反，我有一个解决方案，它使用 CSS 渐变来绘制块，但仍然使用正常的引导进度条。 

.progress.discrete {
    background-image: linear-gradient(0deg, 
        black 0%, green 5%, green 95%, black 100%);
    background-size: 100% 10%;
    background-repeat: repeat-y;
}

/* Bar is used to cover up the blocks, so make it look like a background */
.progress.discrete .bar {
    background-image: linear-gradient(to right, #f5f5f5, #f9f9f9);
}

我假设你希望你的块是栏高度的百分比而不是绝对大小 - 这意味着我不能将渐变应用于栏。相反，它可以应用到背景上，并用条来覆盖它（即，将条的宽度设置为 100-progress%）。我还提供了一个示例，它使用应用于条形图的固定块大小，如果这是您想要的。

http://jsfiddle.net/BHTXZ/3/

它需要一点点整理，但可以解决问题。

于 2013-05-19T18:15:56.487 回答