html - 如何为我的 li 元素设置边框

Question

我正在尝试创建一个 3 列的 div。

我希望示例中的第二列一直显示到底部的虚线边框。

#wrapper {
   
    background-color: yellow;
    top: 88px;
    left: 55px;

}

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

#col1{
    display: table-cell;
}


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


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

 <div id='wrapper'>
     <div class="row">
        <div id='col1' class="col-xs-4">
            <ul>
                <li>
                    <a href=''>col-1</a>
                </li>

            </ul>
        </div>

        <div id='col2' class="col-xs-4">
            <ul>
                <li>
                    <a href=''>col -2</a>
                </li>
            </ul>
        </div>

        <div id='col3' class="col-xs-4">
            <ul>
                <li>
                    row 1
                </li>
                <li>
                    row 2
                </li>
                <li>
                    row 3
                </li>
                <li>
                    row 4
                </li>
            </ul>
        </div>
     </div>
 </div>

JSFiddle http://jsfiddle.net/Mcq6u/17/

我该怎么做？非常感谢!

Answer 1

您可以简单地添加:

    .row{ 
         display:table-row;
    }

   .col-xs-4 {  
        display: table-cell;
        float: none; 
    }

JSFIDDLE: http://jsfiddle.net/Mcq6u/29/