html - 具有百分位边距的 HTML 流体布局

Question

如何将我的黄色框布局放在一行中。

Html（更新 - 带有数字的小框必须是内联的）：

<table style='table-layout: fixed; border-collapse: collapse; width: 100%;'>
            <tr>
                <td style='width: 34%; border: 1px solid #ccc; display: inline-block;'>

                    <!--commented out doesn't work-->
                    <!--div style="margin-right: 55%; margin-left: -55%; background-color: yellow;">One</!--div-->

                    <div style="margin-right: 50%; margin-left: -50%; background-color: yellow;">
                        <div style="border: 1px solid #ccc; width: 20px; margin-left: auto; margin-right: auto; text-align: center;">1</div>
                    </div>
                    <div style="margin-right: -50%; margin-left: 50%; background-color: yellow;">
                        <div style="border: 1px solid #ccc; width: 20px; margin-left: auto; margin-right: auto; text-align: center;">2</div>
                    </div>
                </td>
                <td style='width: 33%; border: 1px solid #ccc;'>
                    <div style="margin-right: -50%; margin-left: 50%; background-color: yellow;">
                        <div style="border: 1px solid #ccc; width: 20px; margin-left: auto; margin-right: auto; text-align: center;">3</div>
                    </div>
                </td>
                <td style='width: 33%; border: 1px solid #ccc;'>
                    <div style="margin-right: -50%; margin-left: 50%; background-color: yellow;">
                        <div style="border: 1px solid #ccc; width: 20px; margin-left: auto; margin-right: auto; text-align: center;">4</div>
                    </div>
                </td>
            </tr>
        </table>

Answer 1

这适用于这个特定的例子。 http://jsfiddle.net/bdJUL

<table style='table-layout: fixed; border-collapse: collapse; width: 100%;'>
        <tr>
            <td style='width: 34%; border: 1px solid #ccc; position: relative;'>

                <!--commented out doesn't work-->
                <!--div style="margin-right: 55%; margin-left: -55%; background-color: yellow;">One</!--div-->

                <div style="margin-right: 50%; margin-left: -50%; background-color: yellow;">
                    <div style="border: 1px solid #ccc; width: 20px; margin-left: auto; margin-right: auto; text-align: center;">1</div>
                </div>
                <div style="margin-right: -50%; margin-left: 50%; background-color: yellow; position: absolute; top: 1px; width: 100%;">
                    <div style="border: 1px solid #ccc; width: 20px; margin-left: auto; margin-right: auto; text-align: center;">2</div>
                </div>
            </td>
            <td style='width: 33%; border: 1px solid #ccc;'>
                <div style="margin-right: -50%; margin-left: 50%; background-color: yellow;">
                    <div style="border: 1px solid #ccc; width: 20px; margin-left: auto; margin-right: auto; text-align: center;">3</div>
                </div>
            </td>
            <td style='width: 33%; border: 1px solid #ccc;'>
                <div style="margin-right: -50%; margin-left: 50%; background-color: yellow;">
                    <div style="border: 1px solid #ccc; width: 20px; margin-left: auto; margin-right: auto; text-align: center;">4</div>
                </div>
            </td>
        </tr>
    </table>