Home > Blockchain >  'Column' CSS for earlier browsers
'Column' CSS for earlier browsers

Time:11-23

Can I imitate the CSS column property in earlier browsers without using Javascript?

I am trying to do something like:

A        E        I
B        F        J
C        G
D        H

I want to know if it is possible with only one element?

<div class="columns">
    A<br/>
    B<br/>
    C<br/>
    D<br/>
    E<br/>
    F<br/>
    G<br/>
    H<br/>
    I<br/>
    J<br/>
</div>

CodePudding user response:

One way that could work is dividing up the letters like this:

<div class="col1"> 
    A
    B
    C
    D
</div>
<div class="col2">
    E
    F
    G
    H
</div>
<div class="col3">
    I
    J
</div>

And then the CSS looks like this:

.col1{
    width: 33%;
    float: left;
    padding: 1em;
.col2{
    width: 33%;
    float: left;
    padding: 1em;
.col3{
    width: 33%;
    float: left;
    padding: 1em;
  • Related