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 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
Post a Comment