Question

使用CSS战斗从表到所有div的转换......

我附上了一张关于输出需要的图片，但在所有“花车”，“边距”，“自我对齐”等之间。我完全迷茫了自己。 Output desired.

这是我的代码：

    <!DOCTYPE html>
<html>
    <head>
        <title>Spacing Test</title>
        <meta charset="UTF-8">
        <script>
        </script>
        <style>
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td rowspan="2">  <!-- shown as gray background width=250px height=100% of screen -->
                    <select>  <!-- width=225px but centered in gray -->
                        <option>[Select a Workbook]</option>
                        <option>Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                        <option>Option 4</option>
                    </select>
                    <div>  <!-- shown as orange background width=225px but centered in gray -->
                        <!-- area where sub-options are displayed that are defined by option selected from the dropdown -->
                    </div>
                    <input type="button" value="Go to View"> <!-- width=225px but centered in gray -->
                </td>
                <td>
                    <div></div>  <!-- shown as light green background width=(50% after gray) height=50% of screen -->
                </td>
                <td>
                    <div></div>  <!-- shown as light blue background width=(50% after gray) height=50% of screen -->
                </td>
            </tr>
            <tr>
                <td>
                    <div></div>  <!-- shown as yellow background width=(50% after gray) height=50% of screen -->
                </td>
                <td>
                    <div></div>  <!-- shown as light orange background width=(50% after gray) height=50% of screen -->
                </td>
            </tr>
        </table>
    </body>
</html>

用DIV和CSS替换TABLE

0 个答案: