如何以特定方式定位此元素

Question

早安！

我有简单的 HTML 和 CSS 结构，看起来像这样：

.item{
    background-color: cyan;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: table;
}
.item > div{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

<table style="width: 100%; margin-top: 10px;">
    <tr style="width: 100%;">
        <td style="width: 10%;"><div class="item"><div>0</div></div></td>
        <td style="width: 10%;"><div class="item"><div>1</div></div></td>
        <td style="width: 10%;"><div class="item"><div>2</div></div></td>
        <td style="width: 10%;"><div class="item"><div>3</div></div></td>
        <td style="width: 10%;"><div class="item"><div>4</div></div></td>
        <td style="width: 10%;"><div class="item"><div>5</div></div></td>
        <td style="width: 10%;"><div class="item"><div>6</div></div></td>
        <td style="width: 10%;"><div class="item"><div>7</div></div></td>
        <td style="width: 10%;"><div class="item"><div>8</div></div></td>
        <td style="width: 10%;"><div class="item"><div>9</div></div></td>
        <td style="width: 10%;"><div class="item"><div>10</div></div></td>
    </tr>
</table>
<table style="width: 100%;">
    <tr style="width: 100%;">
        <td style="width: 10%;"><div><div style="text-align: left; font-size: 12.5px;">Zdecydowanie nie polece</div></div></td>
        <td style="width: 80%;"><div><div></div></div></td>
        <td style="width: 10%;"><div><div style="text-align: right; font-size: 12.5px;">Zdecydowanie polece</div></div></td>
    </tr>
</table>

现在，在移动设备上，我想稍微改变一下这些元素的位置。但是媒体查询不是问题。我想要这样的东西：

问题是，我不能使用任何 flexbox 或网格样式方法，因为我正在为电子邮件目的制作模板。那么您知道我们如何将这种结构样式设置为来自 IMG 的结构吗？

祝你有美好的一天！

Answer 1

您可以在 td 上使用带有 colspan 属性的表格来实现此目的，但您必须更改标记，以便奇数和偶数位于单独的行中。 除了第二行中的第一个和最后一个元素之外，每个元素都有 colspan="2"，这将是空的并且有一个 clospan="1"。

Answer 2

tbody{
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    table tr td .item{
        background: #fb5f66;
        width: 50px;
        height: 50px;
        text-align: center;
        vertical-align: middle;
        display: table-cell;
        border-radius: 50px;
    }

<table>
    <tbody>
        <tr>
            <td><div class="item">0</div></td>
            <td><div class="item">2</div></td>
            <td><div class="item">4</div></td>
            <td><div class="item">6</div></td>
            <td><div class="item">8</div></td>
            <td><div class="item">10</div></td>
        </tr>
        <tr>
            <td><div class="item">1</div></td>
            <td><div class="item">3</div></td>
            <td><div class="item">5</div></td>
            <td><div class="item">7</div></td>
            <td><div class="item">9</div></td>
        </tr>
    </tbody>
</table>