使用CSS拆分条形图

我正在尝试使用CSS创建拆分条形图。我的意思是这样的......使用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; 
}

我一直在玩这个好几个小时，但不能算出如何最好把第二个栏放在中央文本列的左侧。我得到的最接近的是两个酒吧在对方顶部？我认为有这样做的更好的方法，但我真的没有线索。有没有人有可能的解决方案？

非常感谢，戴夫

来源

2014-02-11 David Lettice

在另一边添加的代码在哪里？ Btw +1原始绘图，小提琴和代码:) –

它可以是任何真的，我发布的代码基本上是我在教程中找到的东西，而不是现实生活中会用到的东西。你可以将条形图分成两组，每组有三个图表，我确信我可以复制它。我只是停留在如何让球滚动。 –

那么，为什么使用dt/dd？使用divs ... –

与描述列表（<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>元素的高度，以便使事情。也许别人可以想出一个更好的方式来处理这个......我想不出任何事情。

来源

2014-02-11 17:29:47 pschueller

非常感谢 - 如果没有其他事情，至少应该帮助我把球打滚。这是我修改了一下之后到目前为止所做的... http://jsfiddle.net/DEUet/5/显然它需要整理一些东西，但它似乎工作正常。由于我在CSS方面有点新手，我可以问一下为什么你不喜欢负边距？ –

它不是那么多的负余量困扰我，但更多的是边缘需要匹配DT的高度......从而创建一个依赖。就CSS而言，负利润率是完全正确的。你的小提琴看起来很棒，喜欢你放在它上面的动画。 :-) – pschueller

检查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;}

希望它有帮助。

来源

2014-02-11 16:23:07 Nibbler

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％到右侧必要的值。

来源

2014-02-11 18:14:29 xezno

使用CSS拆分条形图

回答

相关问题