创建从上到下无序列表而不是从左到右的最快方法

Question

我正在尝试创建一个从上到下的导航菜单。目前，我的广告内容为300像素宽<ul>，内容为150像素<li>。见下面的布局......

目前我的列表从左到右（自然地）浮动，但我正在努力弄清楚我怎么能让它看起来像是从上到下。所以数字按顺序出现。

理想情况下，我不想使用jquery来做这件事，但如果这是最简单的方法，那就这样吧。我宁愿一些PHP以自定义顺序输出它。

我正在使用wordpress的get_post来获取日历结果。

$events = get_posts(array(
    'post_type' => 'motogp-2014',
    'posts_per_page' => -1,
    'post_status' => 'publish',
    'meta_key' => 'event_calendar_date',
    'orderby' => 'meta_value_num',
    'order' => 'ASC'
));

if ($events) {

    echo '<ul id="circuit-navigation">';  

    foreach ($events as $event) {

是否通过自定义订单对查询进行排序？

请参阅下面我需要帖子的顺序......这些是帖子ID。

唯一的问题是我无法按此顺序获取帖子，因为wordpress没有id的自定义顺序功能。如果我命令 - 它以数字命令id。我按照ID出现在下面的顺序需要它们。

array(1045,1093,1047,1097,1053,1100,1059,1105,1063,1112,1073,1118,1075,1121,1085,1123,1087,1130,1089)

如果有人建议帮助我，我将非常感谢。

Answer 1

我认为实现类似这样的事情的最简单方法是使用css的列功能。

#circuit-navigation {
  columns: 2;
  -moz-columns: 2;
  -webkit-columns: 2;
}

这是一个工作小提琴： http://jsfiddle.net/LxnFZ/

                            ******BE AWARE******

这适用于较新的浏览器。要查看兼容性列表，请查看caniuse.com