Question

我在CSS中遇到问题。基本上，有许多具有相同类别（宽度为30％）的分隔符应该沿着页面显示。

我希望三个分隔线相互堆叠。第一部分有效，但它们没有相互堆叠。这些分隔线之间存在间隙（尺寸不同）（垂直）。

问题：我如何摆脱这些差距？

主要的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“left”，将下一个分隔符设置为“right”，依此类推。可悲的是，这也没有用。

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

感谢。

Answer 1

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

http://www.bootply.com/118335是一个很好的例子（bootstrap是不必要的）。关键的重点是：

display: inline-block; width: 100%;
column-gap和column-width在rules-sections

垂直使用分频器的差距

1 个答案: