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

你应该得到类似的东西：

不需要嵌套<div>。

Answer 2

您通常应该在语义上标记您的内容，然后设置样式。

看起来你有五个主要领域：

消息
用户列表
对照
输入
聊天室

让我们做一些标记：

<div class="left">
    <div id="messages">
        messages
    </div>
    <div id="user-list">
        user-list
    </div>
</div>
<div id="controls">
    controls
</div>
<div class="left">
    <div id="input">
        input
    </div>
    <div id="chatrooms">
        chatrooms
    </div>
</div>

还有一点风格：

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

你应该可以从这里完成它。大多数CSS布局中最重要的部分是正确浮动。

Answer 3

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

Answer 4

感谢您的链接，这解释了很多。听起来很熟悉，我以前做过这个，但它可能非常棘手。

在解释这个批次之前，我需要知道你是否想要支持IE6。如果是这样，您可能不得不恢复到IE怪癖模式，因为您将需要边框框模型（在IE中无法以其他方式选择，并且不能同时使用top和bottom属性）。如果是这样，我建议将所有其他浏览器放在这个盒子模型中，这样你就不必为IE和其他的两个单独的样式表（当然，你仍然需要一些解决方法）。简而言之，在使用这种不同的盒子模型后，您可以通过使用border-top和border-bottom的样式来获得准顶部和底部属性。它们的行为类似于顶部和底部，因为它们现在位于给定高度内（例如，视口的100％）。我希望这至少有点可以理解。

如果没有，那就比它更简单一点，您可以使用固定定位和<div>获取top 和 bottom属性来设置样式。 IIRC，这也适用于IE7 +。

但首先，告诉我你是否需要支持有缺陷的人......

Answer 5

Eli和Mike D.答案的问题在于，如果我正确地理解了这个问题，puddingfox希望上面的三个div分散在视口的总大小上。在这种情况下，你会遇到编码IE6的问题，因为那时你不能在同一个元素上使用top和bottom属性（中间div需要它）。

替代HTML <table> </table>中的布局

5 个答案: