小编Dav*_*ice的帖子

我正在尝试使用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; …

我曾经有一个包含国家列表的PHP数组：

$countries = array(
  'AX' => 'Åland Islands',
  'AF' => 'Afghanistan',
  'GB' => 'United Kingdom'
);

$collator = collator_create('en');
collator_asort($collator, $countries, Collator::SORT_STRING);

显然，此示例的列表要短得多，但是此处的排序有效。我期望得到：

• 阿富汗
• 奥兰群岛
• 英国

但是，我需要添加更多数据，并且它变成了多维数据：

$countries = array(
  array(
    'name' => 'Åland Islands',
    'code' => 'AX'
  ),
  array(
    'name' => 'Afghanistan',
    'code' => 'AF'
  ),
  array(
    'name' => 'United Kingdom',
    'code' => 'GB'
  )
);

usort($countries, function($a, $b){ return $a['name'] <=> $b['name']; });

它对列表中的每个其他国家/地区进行排序，但是给了我这个：

• 阿富汗
• 英国
• 奥兰群岛

我一生无法解决如何正确分类的问题。我意识到在当前状态下不会调用或应用任何整理程序，但是有没有办法使整理程序在多维环境中工作？