如何用html布局画布和表格/列表？

问题描述 投票：0回答：1

我想在一个页面中同时布局画布和表格/列表水平

左侧，我有一个画布，它具有固定的宽度和高度，并且包含许多多边形 在右侧，我将看到包含多行文本的列表，当我单击一行文本时，它将在左侧画布上显示各种行。

这里是示例代码，无论我尝试什么，它总是垂直排列而不是水平排列，有任何线索吗？

.flex-container {
  display: flex;
  padding: 10px;
}

</style>

<script src="index.js"> </script>
<body>
   <div class="flex-container">
            </div class="flex-left">
                <div class = "leftside">
                    <canvas class="canvasView" id="myCanvas" width = "200" height = "300">
                        Your browser does not support the HTML canvas tag.
                    </canvas>
                </div>
            </div>
                <div class="flex-right">
                    <div class = "rightside">
                        <table id="my_table" class="table">
                            <thead>
                                <tr>
                                    <th>Name</th>
                                    <th>Detour_Percentage</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
    </div>
</body>
</html>
javascript html canvas layout
1个回答
0
投票

正如我所看到的，由于多个奇异的div标记，您的html对于引导功能无效。请纠正它们。这是第一件事，应该纠正。

enter image description here

<div class="flex-container">
    <div class="flex-left">
        <div class = "leftside">
            <canvas class="canvasView" id="myCanvas" width = "200" height = "300">
                    Your browser does not support the HTML canvas tag.
            </canvas>
        </div>
    </div>
    <div class="flex-right">
        <div class = "rightside">
            <table id="my_table" class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Detour_Percentage</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

请尝试使用此html。使用引导程序时，单个div标签不起作用。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.