我正在为一个元素创建某种网格。网格有一个特殊要求(这就是我们尝试在内部创建一个的原因),中间的列必须是可滚动的。
描绘一下情况:我们或多或少地创建了网格: 有一个 topcontainer div,它包含 3 个其他 div,分别是左中容器和右容器。 左侧容器包含分为 4 列的用户信息。中间的 div 包含 x 列(取决于经理选择的周数)和文本框,可以在其中输入特定员工的小时数,右边的 div 有一些列用于总计和平均值。
回答我的问题:当我使用来自服务器 (asp.net 2.0) 的数据呈现控件或通过 javascript 添加一行时,包含用户数据的左侧列应该具有动态宽度,并且用户是选择后,我想在 leftcontainer 中保留列以在需要时自动水平调整大小,并且在 topcontainer 中出现一个额外的滚动条(以避免我的 div 垂直分解) 我认为在我的列中,具有最大宽度的第二个 topcontainer div 和具有 overflow-x: scroll, + a width: auto 的 topcontainer div 应该可以解决问题,但这似乎不起作用。
任何人都可以让我走上正轨吗?我希望我的解释是可以理解的。 反正我加了一张图[图片][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>
关于.net - 自动宽度和溢出 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/750794/