Question

我正在尝试使用CSS创建拆分条形图。我的意思是这样的......

   _____       __________
 __|____| Text |_________|
|_______| Text |___|__
 |______| Text |______|

（请原谅粗略的图纸！我希望它有意义）

无论如何，我到目前为止的代码创建了我在JSFiddle

上附加的内容

HTML：

<dl style="width: 600px">
<dt>2008</dt>
<dd><div id="data-one" class="bar" style="width: 5%">&nbsp;</div></dd>
<dt>2009</dt>
<dd><div id="data-two" class="bar" style="width: 80%">&nbsp;</div></dd>
<dt>2010</dt>
<dd><div id="data-three" class="bar" style="width: 64%">&nbsp;</div></dd>
<dt>2011</dt>
<dd><div id="data-four" class="bar" style="width: 30%">&nbsp;</div></dd>
<dt>2012</dt>
<dd><div id="data-five" class="bar" style="width: 30%">&nbsp;</div></dd>
<dt>2013</dt>
<dd><div id="data-six" class="bar" style="width: 30%">&nbsp;</div></dd>
</dl>

CSS：

dt { 
    float: left; padding: 4px; 
}

.bar {
    margin-bottom: 10px;
    color: #fff;
    padding: 4px;
    text-align: center;
    background-color: #FFC94D;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

我已经玩了好几个小时，但是无法弄清楚如何最好地在文本中心栏的左侧放置第二个栏。我得到的最接近的是两个酒吧在彼此的顶部？！我认为有一种更好的方法可以做到这一点，但老实说我没有线索。有没有人有可能的解决方案？

非常感谢，戴夫

Answer 1

坚持使用说明列表（<dl>，<dt>，<dd>），这有点难以打破HTML流程，但我想我找到了一种有效的方法主要是流动的。

首先，添加第二个条形作为额外的<dd>元素，从而保持正确的HTML结构：

<dt>2008</dt>
<dd>
    <div id="data-one-left" class="bar" style="width:10%">&nbsp;</div>
</dd>
<dd>
    <div id="data-one-right" class="bar" style="width: 5%">&nbsp;</div>
</dd>

接下来，将<dt>元素居中并为它们提供流畅的宽度和高度：

dl {
    width: 100%;
}
dt {
    height: 2rem;
    width: 8%;
    margin: 0 auto;
    text-align: center;
    line-height: 2rem;
}

现在给你的<dd>元素留下剩余的宽度并向左/向右浮动：

dd {
    width: 46%;
    margin: -2rem;
}
dd:nth-of-type(odd),
dd:nth-of-type(even) div {
    float: left;
}
dd:nth-of-type(even),
dd:nth-of-type(odd) div {
    float: right;
}

这是一个有效的jsfiddle。

我不喜欢这个解决方案的一件事是，我必须给<dd>元素一个负余量，等于<dt>元素的高度，以便对齐事物。也许其他人可以想出一个更好的方法来解决这个问题......我想不出任何事情。

Answer 2

检查http://jsfiddle.net/jfMTg/

所以我把一个包装纸放在里面，制成3列edgeLeft |中心| edgeRight

在左栏添加方向：rtl以产生您想要的效果。

#wrapper { width:100%;}
#edgesLeft{width:35%; background:#f5f5f5; display:inline-block; direction: rtl;}
#edgesRight{width:35%; background:#f5f5f5; display:inline-block; padding-left:40px;}
#center{width:25%; text-align: center;display:inline-block;}

希望它有所帮助。

Answer 3

http://jsfiddle.net/E9QF9/ 那你在寻找什么？我无法解释这些变化，因为有很多 - 只要看看你的表并比较两者！（基本上，数据值是HTML格式）E.G

<dd>
    <div id="data-six-left" class="bar" style="width: 60%">&nbsp;</div>
</dd>
<dd>
    <div id="data-six-right" class="bar" style="width: 0%">&nbsp;</div>
</dd>

将60％更改为左侧所需的值，将0％更改为右侧所需的值。

使用CSS拆分条形图

3 个答案: