Question

我正在尝试使用一堆元素创建一个div

<div id='wrapper'>
    <div id='col1'>
        <ul>
            <li>
                <a href=''>col-1</a>
            </li>

        </ul>
    </div>

    <div id='col2'>
        <ul>
            <li>
                <a href=''>col -2</a>
            </li>
        </ul>
    </div>

    <div id='col3'>
        <ul>
            <li>
                row 1
            </li>
            <li>
                row 2
            </li>
            <li>
                row 3
            </li>
            <li>
                row 4
            </li>
        </ul>
    </div>
</div>

CSS

#wrapper {
    position: absolute;
    background-color: #DEEFC5;
    top: 88px;
    left: 55px;
}

#wrapper li{
    width: 120px;
    height: 50px;
    padding-top: 15px;
}

#col1{
    float: left;
}


#col2{
    float: left;
    border-left: dotted 2px grey;
    height: 100%;
}


#col3{
    float: left;
    border-left: dotted 2px grey;
}

我是否可以在col-2中从上到下显示虚线边框，即使<li>中只有1 col-2 div？

这是我的jsfiddle http://jsfiddle.net/Mcq6u/7/

感谢您的帮助

Answer 1

您可以使用显示表，但是您必须使用媒体查询才能让它在您想要的断点处环绕。

#wrapper {
    position: absolute;
    background-color: yellow;
    top: 88px;
    left: 55px;
    display: table;
}

#wrapper li{
    width: 120px;
    height: 50px;
    padding-top: 15px;
}

#col1{
    display: table-cell;
}


#col2{
    border-left: dotted 2px grey;
    height: 100%;
    display: table-cell;
}


#col3{
    border-left: dotted 2px grey;
    display: table-cell;
}

http://jsfiddle.net/Mcq6u/10/

编辑：添加媒体查询以获得完整的预期结果，并清理CSS。

http://jsfiddle.net/iancwoodward/Mcq6u/16/

Answer 2

我仍然在尝试为你制定一个css解决方案。

但你也可以在document.ready上使用jquery，如下所示：

$(document).ready(function() {
   $("#col2").height($("#col3").height()); 
});

Answer 3

根据您要实现的目标，您可以通过在所有元素上设置高度值来获得此效果 - 我使用了100％。这等于所有列但导致线条一直向下到视口的底部。您可以通过将包装器的高度更改为实际像素值来防止这种情况发生，或者如果它将嵌套，则它是父元素。

    #wrapper {
        position: absolute;
        background-color: yellow;
        top: 88px;
        left: 55px;
        height: 100%;
    }

    #wrapper li{
        width: 120px;
        height: 50px;
        padding-top: 15px;
    }

    #col1{
        float: left;
    }


    #col2{
        float: left;
        border-left: dotted 2px grey;
        height: 100%;
    }


    #col3{
        float: left;
        border-left: dotted 2px grey;
        height: 100%;
    }

在我的情况下如何为li元素创建边框？

3 个答案: