替代HTML中的<table>布局

Question

所以现在我的网页设置与浏览器窗口的大小完全相同overflow:scroll.基本上页面排列在两列和三行表中.我不想使用表格进行样式/格式化,所以我的问题是如何进行此迁移.

我的页面(简而言之):

<table>
<tr>
    <td>
        <div style="overflow:scroll;">
            <div>
                stuff1
            </div>
            <div>
                stuff1A
            </div>
        </div>
    </td>
    <td>
        <div style="overflow:scroll;">
            <div>
                stuff2
            </div>
            <div>
                stuff2A
            </div>
        </div>
    </td>
</tr>
<tr>
    <td>
           <input type="submit"><input type="submit"><input type=    "submit">
    </td>
    <td>
           <input type="submit"><input type="submit"><input type="submit">
    </td>
</tr>
<tr>
    <td>
    <textarea>stuff3</textarea></td>
    <td><select multiple>
        </select></td>
</tr>

问题本质上是我想嵌套<div>而不<div>在换行符上放置第二个嵌套:

<div style="overflow:scroll;"> <div>stuff4</div><div>stuff4A</div> </div>
<div style="overflow:scroll;"> <div>stuff5</div><div>stuff5A</div> </div>

我希望上面显示在同一行上的两个可滚动区域,我不能使用,<textarea>因为文本需要多种颜色(请参阅提供的链接).对于那些感兴趣的人,该页面最终将成为大学CS部门完全在浏览器内即时消息技术支持系统的工作人员.

Answer 1

那么,你这样做的基本方法是将你的页面分成六个<div>:

<div class="left" id="l1">1</div>
<div class="right" id="r1">2</div>
<div class="left" id="l2">3</div>
<div class="right" id="r2">4</div>
<div class="left" id="l3">5</div>
<div class="right" id="r3">6</div>

然后你写一些CSS:

div.left {
    float: left;
    clear: both;
}

你应该得到类似的东西:

1   2

3   4

5   6

不需要嵌套<div>.

Answer 2

新的 CSS 网格选项：

<style>
#grid {
    display: grid;
    grid-template-columns: 20% 20% 20%;
}
</style>

<div id="grid">
    <div>first</div>
    <div>second</div>
    <div>thrid</div>
    <div>fourth</div>
    <div>fifth</div>
    <div>sixth</div>
    <div>seventh</div>
    <div>eighth</div>
    <div>nineth</div>
</div>