css表格问题 要求和table一样可以自动伸缩。

html-css026

css表格问题 要求和table一样可以自动伸缩。,第1张

div 要设高度

DIV 不像表格那样 同一行按高度最大的 单元格 为标准

你给左右两边的DIV 设个高度 你就会看出问题所在了。

<div style=" border-top:1px #ccc solidborder-bottom:1px #ccc solidtext-align:centeroverflow:hidden">

<div style="float:leftwidth:100pxborder-left:1px #ccc solidheight:100%padding-bottom: 1000pxmargin-bottom: -1000px">dasdbebebebe</br>dsadasdasd</div>

<div style="float:leftwidth:300pxborder-left:1px #ccc solidheight:100%">bebebebe</br>dsadasdasdbebebebe</br>dsadasdasdbebebebe</br>dsadasdasd</div>

<div style="float:leftwidth:100pxborder-left:1px #ccc solidheight:100%padding-bottom: 1000pxmargin-bottom: -1000px">dasdbebebebe</br>dsadasdasd</div>

<div style="clear:both"></div>

你试试 应该是可以的 刚写的 可读性不是很好

要达到这种效果最好用表格做,一行两列的表格

<table width="100%" cellpadding="0" cellspacing="0">

<tr>

<td width="10%" nowrap="nowrap">DropDownList根据数据源宽度自动调整</td>

<td>TextBox</td>

</tr>

</table>

width="10%" 设置的宽度值,nowrap="nowrap" 使该列宽度超出亦不换行,自适应宽度向后一列挤压。

可以采用一下两种方法来自动调节栾杜问题。

1、使用百分比来实现自动适应宽度。

可以设置宽度的值为百分比,如

width=“80%”

此时宽度就是其父元素的80%宽度。

2、可以采用是js获取屏幕的宽度,以实现宽度随不同分辨率来改变。

先关函数方法如下:

网页可见区域宽 document.body.clientWidth

网页可见区域高 document.body.clientHeight

网页可见区域宽(包括边线的宽) document.body.offsetWidth

网页可见区域高(包括边线的宽) document.body.offsetHeight

网页正文全文宽 document.body.scrollWidth

网页正文全文高 document.body.scrollHeight

网页被卷去的高 document.body.scrollTop

网页被卷去的左 document.body.scrollLeft

网页正文部分上 window.screenTop

网页正文部分左 window.screenLeft

屏幕分辨率的高 window.screen.height

屏幕分辨率的宽 window.screen.width

屏幕可用工作区高度 window.screen.availHeight

屏幕可用工作区宽度 window.screen.availWidth