html - 使用分隔线垂直间隔

Question

我在 CSS 方面遇到了问题。基本上，页面上应该有许多具有相同类别(宽度为 30%)的分隔线。

Here's the page

我想要三个隔板相互堆叠。第一部分有效，但它们并没有相互叠加。这些分隔线(垂直)之间存在间隙(大小不同)。

问题:如何消除这些间隙？

index.php主要代码(涉及PHP):

<div class="mainpage">
<?php
    foreach ($rules as $key=>$value)
    {
        if ($blockmethod == 1)
        {
            echo '<div class="rules_section-method1">';
                echo '<div class="rules_title"><h1>' . $value['title'] . '</h1></div>';

                echo '<div class="rules_list">';
                    echo '<ul>';
                        foreach ($value['rules'] as $rule)
                        {
                            echo '<li class="rules_item">' . $rule . '</li>';
                        }
                    echo '</ul>';
                echo '</div>';
            echo '</div>';
        }
        else
        {
            if ($current == 1)
            {
                $display = 'left';
            }
            else if ($current == 2)
            {
                $display = 'right';
            }
            else if ($current == 3)
            {
                $display = 'center';
            }
            else
            {
                $display = 'left';
            }

            echo '<div class="rules_section-method2" id="' . $display . '">';
                echo '<div class="rules_title"><h1>' . $value['title'] . '</h1></div>';

                echo '<div class="rules_list">';
                    echo '<ul>';
                        foreach ($value['rules'] as $rule)
                        {
                            echo '<li class="rules_item">' . $rule . '</li>';
                        }
                    echo '</ul>';
                echo '</div>';
            echo '</div>';
            $current++;

            if ($current > 3)
            {
                $current = 1;
            }
        }
        $cycles++;
    }
?>

CSS 代码:

/* OTHER */

.background 
{
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px;
    z-index: -1;
    background-image: url('images/bg.jpg');
}

.bgcolor
{
    background-color: rgba(0,0,0,0.85);
    height: 100%;
    width: 100%;
    z-index: -1;
    position: fixed;
}

.mainpage
{
    color: #FFFFFF;
}

.rules_title
{
    background-color: #466D92;
    text-align: center;
    border-radius: 2px 2px 0px 0px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.rules_list
{
    background-color: #252729;
    word-wrap: break-all;
    padding: 0px;
    margin: 0px;
    border-radius: 0px 0px 2px 2px;
    min-height: 100px;
    padding: 5px 5px 5px 5px;
}

/* METHODS */
.rules_section-method1
{
    width: 30%;
    height: auto;
    padding: 5px 5px 5px 5px;
    position: relative;
    margin-left: 25px;
    float: left;
    vertical-align: top;
}

.rules_section-method2
{
    width: 33%;
    height: auto;
    padding: 5px 5px 5px 5px;
    margin-left: 25px;
    display: inline-block;
    vertical-align: top;
}

#left
{
    float: left
}

#right 
{
    float: right;
}

#center
{
    text-align: center;
}

您可能已经注意到，但我在这里尝试了两种方法。如果方法#1 有效，我会更喜欢。但是，我确实尝试了另一种方法，其中涉及将第一个分隔符设置为 ID“左”，下一个分隔符设置为“右”，依此类推。遗憾的是，这也没有用。

非常感谢任何建议/帮助!

谢谢。

Answer 1

我建议使用 CSS3 column-width和 column-gap特性。看看这个例子:

http://www.bootply.com/118335是一个很好的例子( Bootstrap 不是必需的)。关键重要部分是:

1. 显示:内联 block ； width: 100%; 在每个“规则部分”
2. column-gap 和 column-width 在规则部分的包含 div 上设置