使用CSS拆分条形图

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>才能对齐。也许其他人可以想出更好的方法来处理这个问题......我想不出什么。