Question

将一个简单的条形图放在一起然而它在某些值上溢出，目标是使其响应，所以我使用％而不是固定值。

如果容器宽度100％可行，但我需要并排三个，所以容器是33％

div.label {
  background:blue;
  width:20%;
}

div.bar{
    width:80%;
}
div.bar_value{
    background:green;
    width:77%;
}

.row_container{
    background:black;
    width:33%;
}

.row_container div {
    display: inline-block;
}

以下是我所遇到的问题的片段 http://jsfiddle.net/7h64p0h6/1/

Answer 1

你需要避免div与显示内联块元素之间的空格问题。

.row_container{
    background:black;
    width:50%;
    font-size:0;
}

.row_container div {
    display: inline-block;
    font-size:16px;
    vertical-align: top;
}

看到它正常工作：http://jsfiddle.net/7h64p0h6/3/

CSS条形图溢出，两行而不是一行

1 个答案: