CODEWITHSUNDEEP
htmlcss
Naren Verma
Naren Verma

Reputation: 2307

How to display div in three column using column-count in html?

I have to display three column using column-count.I am able to display li tag in three column using column-count but I am not able to display the div. All the div are displaying in a single line.Please check my code and assist me where I am wrong. Would you help me in this?

<!--This is working perfectly-->
<ul class="cource_details_3">
    <li>hlahdahj</li>
    <li>hlahdahj</li>
    <li>hlahdahj</li>
    <li>hlahdahj</li>
    <li>hlahdahj</li>
    <li>hlahdahj</li>
    <li>hlahdahj</li>
    <li>hlahdahj</li>
    <li>hlahdahj</li>
    <li>hlahdahj</li>
    <li>hlahdahj</li>
</ul>


.cource_details_3 {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; 
}
    <span class="cource_details_3">
    <div class="get_9">
    <input type="checkbox">
    <label>9</label>
    </div>
    
    <div class="get_10">
    <input type="checkbox" >
    <label>10</label></div>
    
    <div class="get_11">
    <input type="checkbox"  >
    <label>11</label></div>
    
    <div class="get_12">
    <input type="checkbox">
    <label>12</label></div>
    
    <div class="get_13">
    <input type="checkbox" >
    <label>13</label>
    </div>
    
    <div class="get_14">
    <input type="checkbox">
    <label>14</label>
    </div>
    
    <div class="get_15">
    <input type="checkbox">
    <label>15</label>
    </div>
    
    <div class="get_16">
    <input type="checkbox" >
    <label >16</label>
    </div>
    
    </span>

Upvotes: 0

Views: 1003

Answers (1)

Shadow Fiend
Shadow Fiend

Reputation: 1829

Change span to div

.cource_details_3 {
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; 
}
    <div class="cource_details_3">
    <div class="get_9">
    <input type="checkbox">
    <label>9</label>
    </div>
    
    <div class="get_10">
    <input type="checkbox" >
    <label>10</label></div>
    
    <div class="get_11">
    <input type="checkbox"  >
    <label>11</label></div>
    
    <div class="get_12">
    <input type="checkbox">
    <label>12</label></div>
    
    <div class="get_13">
    <input type="checkbox" >
    <label>13</label>
    </div>
    
    <div class="get_14">
    <input type="checkbox">
    <label>14</label>
    </div>
    
    <div class="get_15">
    <input type="checkbox">
    <label>15</label>
    </div>
    
    <div class="get_16">
    <input type="checkbox" >
    <label >16</label>
    </div>
    
    </div>

Upvotes: 1

Related Questions