Question

我正在为项目创建某种网格。网格有一个特殊要求（这就是为什么我们试图在内部创建一个），中间列必须是可滚动的。

想象一下情况：我们或多或少地创建了这样的网格：有一个topcontainer div，其中包含左侧中间和右侧容器的3个其他div。左侧容器包含分为4列的用户信息。中间div包含x列（取决于经理选择的周数）和文本框，其中可以输入特定员工的小时数，右侧div有一些总计和平均值列。

要回答我的问题：包含userdata的左列应具有动态宽度，当我使用来自服务器的数据（asp.net 2.0）渲染控件或通过javascript添加行时，用户是拾取，我想在左侧容器中留下列，以便在需要时自动调整水平，并在顶部容器中显示额外的滚动条（以避免我的div垂直分解）我认为第二个顶部容器div的最大宽度和顶部容器div的溢出-x：滚动，+一个宽度：自动在我的列中应该已经完成了这个技巧，但这似乎不起作用。

有人能让我走上正轨吗？我希望我的解释是可以理解的。无论如何我添加了一张图片[图片] [1] 基本上我希望我的左列适应其内容的宽度并水平粘在同一水平上。

THX。

Answer 1

我是无表格CSS设计的忠实拥护者，但如果您需要的是表格，请使用表格。

以下是我认为我已经开始使用的一些代码。

我想将中间列设置为屏幕的％，但它不会滚动。它扩展到内部表的大小。

我认为你需要为3列中的每一列添加内部表格以显示你的内容。

<html>
<head>
<style>
table {
    width: 100%;
}
.left {
    background: red;
    width: 100px;
}
.right {
    background: blue;
    width: 100px;
}
.middle {
    background: green;
    width: 800px;
    display: block;
    overflow: scroll;
}
.inner {
    width: 2000px;
    height: 100px;
    background: black;
    display: block;
}
</style>
<body>
<table>
<tr><th class="left">Left</th><th class="middle">Middle Central block<table class="inner">Inner table</table></th><th class="right">Right</th></tr>
</table>
</body>
</html>

自动宽度＆amp;溢出div

1 个答案: