print data in 3 columns with css -


i want print data in 3 columns. data not arranged correctly in columns. have limited knowledge on css. please advice did wrong?

i need print horizontal line in third column afer 6 , 8.

<html> <head> <style> .container{     width: 596px;     float:left;     posy } .container .line {     border-bottom: 1px dotted #999;     border-top-style: none;     margin: 7px 0;     padding: 3px 0 0; } .col1{      width: 186px;     right-padding:19px;     float:left; } .col2{      left: 205px;     right-padding:19px     width: 186px;     float:left; } .col3{      left: 410px;     width: 186px;     float:right;     right:0px; } </style> </head> <body> <div class="container"> <div class="col1"> <ul> <li>test area 1</li> <li>test area 2</li> <li>test area 3</li> <li>test area 4</li> </ul> </div> <div class="col2"> <ul> <li>test area 5</li> </ul> </div> <div class="col3"> <ul> <li> test 6</li> </ul> </div> <div class="line"></div> <div class="col3"> <ul> <li>test area 7</li> </ul> </div> <div class="col3"> <ul> <li>test area 8</li> </ul> </div> <div class="line"></div> <div class="col3"> <ul> <li>test area 9</li> </ul> </div> <div class="col3"> <ul> <li>test area 10</li> </ul> <div class="col3"> <ul> <li>test area 16</li> <li>test area 17</li> <li>test area 18</li> <li>test area 19</li> <li>test area 20</li> </ul> </div> </div> <div class="col1"> <ul> <li>test area 11</li> <li>test area 12</li> <li>test area 13</li> <li>test area 14</li> </ul> </div> <div class="col2"> <ul> <li>test area 15</li> </ul> </div> </div> </html> 

this get. enter image description here

this question similar 1 here: how split ng-repeat data 3 columns using bootstrap
, here: 3 column layout html/css

there several solutions. use css:

li:nth-child(3)  

Comments

Popular posts from this blog

php - Zend Framework / Skeleton-Application / Composer install issue -

c# - Better 64-bit byte array hash -

python - PyCharm Type error Message -