Question

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

我的网页上有一个包含一组按钮的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>

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

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

我可以想象的唯一另一种方式是我在php中设置了一个函数或类似的东西，但我并不是真的很好或知识渊博。但我确实可以把它放在那里，所以如果你有这种解决方案，我也将不胜感激。

非常感谢。

Answer 1

还没有累，但希望它有所帮助。

$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>";
    }
}

CSS - 元素的垂直顺序

1 个答案: