自动宽度和溢出div
问题描述:
我正在为某个项目创建某种网格。网格有一个特殊的要求(这就是我们试图在室内创建一个的原因),中间的列必须是可滚动的。自动宽度和溢出div
为了描述情况:我们创建了或多或少的网格: 有一个topcontainer div,其中包含3个其他div左边的中间和右边的容器。 左侧容器包含分为4列的用户信息。中间div包含x列(取决于经理选择多少个星期),可以输入某个员工的小时数的文本框,右边的div包含总计和平均值的一些列。
要解决我的问题:包含userdata的左列应具有动态宽度,当我使用服务器(asp.net 2.0)中的数据呈现控件时,或者通过javascript添加行时,用户被选中时,我想留下左容器中的列以在需要时自动调整水平大小,并且topcontainer中出现额外的滚动条(以避免我的div的垂直分离) 我想到了第二个topcontainer div具有最大宽度和带有overflow-x:scroll的topcontainer div,在我的列中加上一个width:auto应该已经完成了这个窍门,但那似乎并不奏效。
任何人都可以把我放在正确的轨道上吗?我希望我的解释是可以理解的。 无论如何,我添加了一张图片[图片] [1] 基本上我想我的左列适应他们的内容的宽度,并水平地坚持在同一水平。
thx。
答
我是非桌面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>
听起来像很多列:4 + x +一些!你的意思是说为他们中的一些行? – wheresrhys 2009-04-15 16:10:17
偏离主题,但我不会发布我的picasaweb帐户,导致您的电子邮件地址在任何网站 – IEnumerator 2009-04-15 23:53:38