Fallback für Display Flex

Question

Wie kann ich den Boxen, die ich habe, den gleichen Abstand geben, anstatt sie alle zusammen mit so viel Platz auf der rechten Seite zu haben?

Normalerweise verwende ich Display-Flex, weil es das ganz einfach macht, aber da nicht alle Browser Flex-Eigenschaften unterstützen, versuche ich es anders herum.

Unten ist mein Code und ich hoffe, Sie können helfen.

.main > div{ 
 
    float: left; 
 
    height: 100px; 
 
    width: 200px; 
 
} 
 
.yellow{ 
 
    background: yellow; 
 
} 
 
.red{ 
 
    background: red; 
 
} 
 
.green{ 
 
    background: green; 
 
} 
 
.black{ 
 
    background: black; 
 
}

<div class="main"> 
 
    <div class="red"> 
 
    
 
    </div> 
 
    <div class="green"> 
 
    
 
    </div> 
 
    
 
    <div class="yellow"> 
 
    
 
    </div> 
 
    
 
    <div class="black"> 
 
    
 
    </div> 
 
</div>

Answer 1

Sie können versuchen, dies

.main { 
 
    text-align: justify; 
 
} 
 

 
.main:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 100%; 
 
} 
 

 
div>div { 
 
    display: inline-block; 
 
    /* height, width and border for demo purpose only */ 
 
    height: 50px; 
 
    width: 100px; 
 
    border: thin solid darkgray; 
 
} 
 

 

 
/* for browsers that support flex */ 
 

 
@supports (display:flex) { 
 
    .main { 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    } 
 
    .main:after { 
 
    display: none; 
 
    } 
 
}

<div class="main"> 
 
    <div class="red"></div> 
 
    <div class="green"></div> 
 
    <div class="yellow"></div> 
 
    <div class="black"></div> 
 
</div>

Answer 2

Wenn Sie wissen, wie viele Blöcke Sie haben Sie Prozentsätze verwenden:

.main > div { 
    width: 25%; 
} 

Ansonsten könnten Sie eine Tabelle verwenden:

<table style="width:100%"> 
    <tr> 
    <td style="background:red;"></td> 
    <td style="background:green;"></td> 
    <td style="background:black;"></td> 
    <td style="background:blue;"></td> 
    </tr> 
</table>