2

与往常一样，我乍一看有一个“简单”的问题。

我的网页上有一个 div，其中包含一组按钮（实际上是链接，但它们用作按钮）。简单的说：

<div class="container">
<a href="#" id="1" class="link1 button">text</a>
<a href="#" id="2" class="link2 button">text</a>
<a href="#" id="3" class="link3 button">text</a>
<a href="#" id="4" class="link4 button">text</a>
</div>

现在我需要做的是将它们按垂直顺序排列。我的意思是：通常如果它们显示为 inline-block 或 inline 元素，它们将一个接一个水平排列，当行结束时，下一个链接会出现以下链接。浮动也是如此：左。但我需要它们按水平顺序排列——换句话说，不是行，而是具有设定高度的列。当该列到达末尾时，下一列中应出现以下按钮。

有没有办法通过 CSS 实现这一点？

我能想象的唯一另一种方法是我在 php 或类似的东西中设置了一个函数，但我对它不是很好或不了解它。但我确实可以选择把它放在那里，所以如果你有这种解决方案，我也会很感激。

非常感谢。

4

1 回答 1

0

还没累，希望对你有帮助。

$link_array = array();
$link_array[] = array('Google', 'http://google.com/');
$link_array[] = array('Yahoo', 'http://yahoo.com/');
$link_array[] = array('Bing', 'http://bing.com/');

$link_per_column = 10;

foreach ($link_array as $position => $this_link)
{
    if ($position % $link_per_column === 0 && ($position === 0))
    {
        echo '<div class="column">';
        echo "<a href='{$this_link[1]}'>{$this_link[0]}</a>";
    }
    elseif ($position % $link_per_column === 0 && ($position !== count($link_array)))
    {
        echo '</div><div class="column">';
        echo "<a href='{$this_link[1]}'>{$this_link[0]}</a>";
    }
    elseif (($position === count($link_array)))
    {
        echo "<a href='{$this_link[1]}'>{$this_link[0]}</a>";
        echo '</div>';
    }
    else
    {
        echo  "<a href='{$this_link[1]}'>{$this_link[0]}</a>";
    }
}
于 2013-07-26T22:35:26.927 回答