Question

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

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

＆＃13;

#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; 
}

＆＃13;

 <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>

＆＃13;

的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/

Answer 2

您可以为列定义特定高度。看到这个新代码：

<强> CSS：

#wrapper {
    background-color: yellow;
    top: 88px;
    left: 55px;
    height: 100%;  
    width: 100%;   
}
#wrapper li {
    width: 120px;
    height: 50px;
    padding-top: 15px;
    height: 100%;   
}
.row .col-xs-4 {
    height: 200px;
    width: 33%;
}
#col1 {
}
#col2{
    border-left: dotted 2px grey;
}
#col3 {
    border-left: dotted 2px grey; 
}

<强> HTML：

<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>

http://jsfiddle.net/Mcq6u/26/

Answer 3

你为什么要把你的内容包裹在ul和li中？（如果你想要点，你可以使用之前的伪元素）

使用bootstrap的specific classes表示行和列（就像你正在做的那样）你可以使用css：

   .col-xs-4 {
   border-left: dotted 2px grey;
   height: 100%;}
   .col-xs-4:first-child {border: none}

Answer 4

您只需将css display:table用于容器div，将display:table-cell用于内容div

请参阅Fiddle Demo

在我的情况下如何为我的li元素设置边框

4 个答案: