如何响应性地均匀分布文本？

Question

I am having issues at work today and I am trying to responsively spread these 3 text boxes across the screen, one to the left maybe with a little padding pushing away from the left, one in the centre, and one to the right and also with padding pushing away from the right.

I have used many solutions, the reason this doesn't work when it works on my screen every time is because it goes through IE HTML and then gets displayed on an email so it must go through a specific conversion.

I have a feeling that this could also be an older/outdated version of HTML as everything is purely HTML based.

        <div class="awards" style="display: flex; float: float;">
        <div>silver</div>
        <div>gold</div>
        <div>platinum</div>
    </div>

Here is the text boxes, I will try what you guys come up with / recommend, thanks.

Answer 1

Even to this day, CSS Flexbox support is not universally supported across email clients and the most reliable method is a three column table with 33% width on the cells.

<style>
.table-awards {
    width: 100%;
}

.table-awards td {
    border: 1px solid black;
    width: 33%;
}

.gold {background:silver;}
.silver {background:gold;}
.platinum {background:#eefeef;}
</style>
<table class="table-awards" style="width: 100%">
  <tr>
    <td class="gold" style="padding-left: 10px;">Silver</td>
    <td class="silver" style="padding: 0 10px;">Gold</td>
    <td class="platinum" style="padding-right: 10px;">Platinum</td>
  </td>
</table>

If you were going to do it with flex it'd be something like:

<style>
.awards {
    display: flex; 
    justify-content:space-evenly;
}
.awards > div {
    border: 1px solid black;
    flex: 1;
}

.gold {background:silver;}
.silver {background:gold;}
.platinum {background:#eefeef;}
</style>
<div class="awards">
    <div class="gold" style="margin-left: 10px;">silver</div>
    <div class="silver" style="margin: 0 10px;">gold</div>
    <div class="platinum" style="margin-right: 10px;">platinum</div>
</div>