< table>的替代方案HTML中的布局 [英] Alternative to <table> layout in HTML

问题描述

因此，现在我的网页设置与浏览器窗口的大小一致，其中包含 overflow：scroll 。基本上这个页面安排在一个表格的两列和三列中。我想不使用表格来显示样式/格式，所以我的问题是如何进行此迁移。

So right now I have a webpage setup to be exactly the size of the browser window with a couple overflow:scroll 's in it. Basically the page is arranged in two columns and three row of a table. I would like to not use tables for style/formatting so my question is how would I make this migration.

我的页面（简而言之）：

My page (in a nutshell):

<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> >

The problem essentially is I want to nest <div> without putting a second nested <div> on a newline:

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

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

I want the above to display two scrollable areas on the same line and I can't use <textarea> because the text needs to be multiple colors (see link provided). For those interested, the page will eventually be the staff side of a completely in-browser Instant message tech support system for a university's CS department.

推荐答案

好的，您这样做的基本方法是将您的页面分成六个< div> ; s：

Well, the basic way you do this is to break your page up into six <div>s:

<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;
}

你应该得到这样的东西：

And you should get something like:

1   2

3   4

5   6

不需要嵌套< div> 。

这篇关于< table>的替代方案HTML中的布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！