Question

我想创建一个类似于下表结果的div布局：

<html>
    <head>
        <title>Basic</title>
        <style>
            table { border: 1px solid;}
        </style>
    </head>
    <body>
    <table style="border: 1px solid;">
        <tr>
            <td> Asia</td>
            <td>
                <table>
                    <tr>
                        <td>South Asia</td>
                        </td>
                        <td><table>
                                <tr>
                                    <td>Republic</td>
                                    <td><table>
                                            <tr><td>Singapore</td></tr>
                                            <tr><td>India</td></tr>
                                    </table></td>
                                </tr>
                                <tr>
                                    <td>Monarchy</td>
                                    <td><table>
                                            <tr><td>Bhutan</td></tr>
                                            <tr><td>Nepal</td></tr>
                                    </table></td>
                                </tr>
                        </table></td>
                </tr>
                    <tr>
                        <td>East Asia</td>
                        <td><table>
                                <tr>
                                    <td>Republic</td>
                                    <td><table>
                                            <tr><td>China</td></tr>
                                            <tr><td>South Corea</td></tr>
                                    </table></td>
                                </tr>
                                <tr>
                                    <td>Constitutional Monarchy</td>
                                    <td><table>
                                            <tr><td>something</td></tr>
                                            <tr><td>Japan</td></tr>
                                    </table></td>
                                </tr>
                        </table></td>
                    </tr>
            </table></td>
        </tr>
    </table>
    </body>
</html>

我设法通过一些努力来复制这个。问题是我希望国家的名称在列中，或者如果你愿意的话 - 政府类型的容器宽度相同，以便其他容器对齐。

如果我不在嵌套容器中执行它（在示例中 - 嵌套表），行将被取代。目前行显示我想要的方式 - 文本位于它们所引用的垂直中间。

我想到的只是将文本设置在与class = column1，class = column2等相同的列中，然后以某种方式定义列类的宽度。问题是数据是动态定义的，我不能说我可以为列提供多少像素或％的页面，我只需要用文本进行拉伸。

这是我第一次在这里询问帮助，所以如果我做错了，请告诉我如何改进我的询问。

编辑：我刚刚第二次阅读，我注意到我的标题与我的问题不符。我解决这个问题的第二个想法是让一个父母不止一个父母而父母之间没有关系，这是否可能？

Answer 1

如果您正在为CSS寻找合适的网格框架，我强烈推荐blueprint。至于不知道列的像素或％，这将始终是一个问题。你能“安全地玩”并给它们一个足够大的盒子来处理所有文本的可能性吗？

如何设置父母不同的div的大小

1 个答案: