Как установить границу для моего элемента 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/

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

почему вы оберточной вы содержание на ул и Ли? (если вы хотите точек вы можете просто использовать, прежде чем pseudoelement)

с помощью самозагрузки-х 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 своим дивы содержания

См Fiddle Demo