Html 使用分隔器垂直设置间隙

我的CSS有问题。基本上，页面上有许多具有相同类别（宽度为30%）的分隔符

我想要三个横着的隔板，互相叠在一起。第一部分是有效的，但它们并没有相互叠加。这些分隔器（垂直）之间有间隙（大小不同）

问题：如何消除这些差距

main index.php的代码（涉及php）：

你可能已经注意到了，但我在这里尝试了两种方法。我更喜欢方法1是否有效。然而，我尝试了另一种方法，包括将第一个分隔符设置为ID“left”，将下一个分隔符设置为“right”，等等。可悲的是，这也没用

非常感谢您的任何建议/帮助

---

谢谢。

我建议使用CSS3和属性。看看这个例子：

是一个很好的例子（不需要引导）。关键的重要部分是：

显示：内联块；宽度：100%

在包含规则部分的div上设置

列间距

和

列宽

---

是的，现代化很好。IE9是最大的浏览器，但在大多数现代浏览器上都可以使用（不过，厂商前缀为Autoprefixer的浏览器通常会处理这个问题）

<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++;
    }
?>

/* 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;
}