自动宽度和溢出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。

来源

2009-04-15 DavyR

听起来像很多列：4 + x +一些！你的意思是说为他们中的一些行？ – wheresrhys 2009-04-15 16:10:17

偏离主题，但我不会发布我的picasaweb帐户，导致您的电子邮件地址在任何网站 – IEnumerator 2009-04-15 23:53:38

我是非桌面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>

来源

2009-04-15 23:26:09

自动宽度和溢出div

回答

相关问题