多行多列div自适应高度？？？？在线等。

告白气球 2012-06-05 05:48:55

界面全是div+css，效果是一个表格，数据是从数据库里取出来的，外层的div的自适应没问题，就是内部div的border只显示一截，当div里的文字超出div 的宽度就换行，同一行的高度都应该跟这行最高的高度一样。我把背景颜色给它了，发现它文字少的div高度没有跟最高的高度一样，所以border只显示了一截。
请问我内部的自适应该怎么改？只用div + css,,,,,

...全文

288 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

告白气球 2012-06-06

打赏
举报

为什么没有人能解答啊，现在又出现新的问题了，IE6上我的页面随着鼠标的移动变小？？

告白气球 2012-06-06

打赏
举报

[Quote=引用 7 楼的回复:]

可以自己写个标签吗，写个标签用代码来控制换行，也可以在后台做好处理传前台
[/Quote]

什么标签？
我是想用div+css 或是js实现，因为后台已经完成了，不能修改了。就是内部的div不能自适应高度问题。

huage 2012-06-06

打赏
举报

可以自己写个标签吗，写个标签用代码来控制换行，也可以在后台做好处理传前台

告白气球 2012-06-06

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../Styles/Depart.css" type="text/css" rel="stylesheet" />

<title>通讯录</title>

<script language="javascript" type="text/javascript" >

</script>
<style type="text/css">
html, body
{
margin:0 auto;
padding:0;
color:#000;
font-size:14px;
background:#fff;
line-height: 140%;
overflow:auto;
height:auto!important;
max-height:none;
height: 100%;
}
#tongxunlu_border
{
width:998px;
overflow:auto;
border:1px solid #feb535;
border-top:none;
}
#tongxunlu_content
{
overflow:hidden;
text-align: center;
margin:0 auto;
}

.gggl
{
float:left;
text-align:center;
height: max-height;
overflow:auto;
min-height:25px;
height:auto !important;
overflow: visible;
}
.title
{
padding-top:5px;
float:left;
line-height:30px;
}
#letter1{
width:1000px;
float:left;
margin:10px 0 0 0;
}
</style>
</head>
<body>

<div id="header" align="center"><img src="../images/bmzy_02.jpg" width="1000" height="277" /></div>


<div>
<div id="letter1" >
<div id="letter_title"><font size="4" style="margin-left: 300px;"><b>新疆阿勒泰地区中级人民法院——通讯录</b></font></div>
<div id="tongxunlu_border">
<div style="text-align: center; float: left;border-top:solid 1px #feb535;margin-top: 5px; background-color: #FFFFF0;">
<div style="width:210px;border-right:solid 1px #feb535;" class="title"><b>部门</b></div>
<div style="width:170px;border-right:solid 1px #feb535;" class="title"><b>职务</b></div>
<div style="width:210px;border-right:solid 1px #feb535;" class="title"><b>人员名称</b></div>
<div style="width:142px;border-right:solid 1px #feb535;" class="title"><b>固定电话</b></div>
<div style="width:130px;border-right:solid 1px #feb535;" class="title"><b>手机1</b></div>
<div style="width:130px;" class="title"><b>手机2</b></div>
</div><br />
<div style="float: left;">

<div id="tongxunlu_content" style="border-top:solid 1px #feb535;" onmouseover="javascript:this.style.backgroundColor='whitesmoke';" onmouseout="javascript:this.style.backgroundColor='Transparent';">
<div class="gggl" style="width:210px;border-right:solid 1px #feb535;background-color: #FF0000;">办公室（新闻信息中心）</div>
<div class="gggl" style="width:170px;border-right:solid 1px #feb535;" title="庭长">庭长</div>
<div class="gggl" style="width:210px;border-right:solid 1px #feb535;background-color: #FF0000;" title="一二三四五六七八九十十一一二三四">一二三四五六七八九十十一一二三四</div>
<div class="gggl" style="width:142px;border-right:solid 1px #feb535;" title="0991-4564784">0991-4564784</div>
<div class="gggl" style="width:130px;border-right:solid 1px #feb535;">15012415484</div>
<div class="gggl" style="width:130px;">13545458781</div>
</div>

<div id="tongxunlu_content" style="border-top:solid 1px #feb535;" onmouseover="javascript:this.style.backgroundColor='whitesmoke';" onmouseout="javascript:this.style.backgroundColor='Transparent';">
<div class="gggl" style="width:210px;border-right:solid 1px #feb535;background-color: #FF0000;">审管办</div>
<div class="gggl" style="width:170px;border-right:solid 1px #feb535;" title="6546">6546</div>
<div class="gggl" style="width:210px;border-right:solid 1px #feb535;background-color: #FF0000;" title="65">65</div>
<div class="gggl" style="width:142px;border-right:solid 1px #feb535;" title="654">654</div>
<div class="gggl" style="width:130px;border-right:solid 1px #feb535;">13545457878</div>
<div class="gggl" style="width:130px;">13545457878</div>
</div>

<div id="tongxunlu_content" style="border-top:solid 1px #feb535;" onmouseover="javascript:this.style.backgroundColor='whitesmoke';" onmouseout="javascript:this.style.backgroundColor='Transparent';">
<div class="gggl" style="width:210px;border-right:solid 1px #feb535;background-color: #FF0000;">审管办</div>
<div class="gggl" style="width:170px;border-right:solid 1px #feb535;" title="退热贴">退热贴</div>
<div class="gggl" style="width:210px;border-right:solid 1px #feb535;background-color: #FF0000;" title="额天热">额天热</div>
<div class="gggl" style="width:142px;border-right:solid 1px #feb535;" title="5435435">5435435</div>
<div class="gggl" style="width:130px;border-right:solid 1px #feb535;">13545457878</div>
<div class="gggl" style="width:130px;">13545457878</div>
</div>

<div id="tongxunlu_content" style="border-top:solid 1px #feb535;" onmouseover="javascript:this.style.backgroundColor='whitesmoke';" onmouseout="javascript:this.style.backgroundColor='Transparent';">
<div class="gggl" style="width:210px;border-right:solid 1px #feb535;background-color: #FF0000;">翻译处</div>
<div class="gggl" style="width:170px;border-right:solid 1px #feb535;" title="退热贴">退热贴</div>
<div class="gggl" style="width:210px;border-right:solid 1px #feb535;background-color: #FF0000;" title="额天热">额天热</div>
<div class="gggl" style="width:142px;border-right:solid 1px #feb535;" title="5435435">5435435</div>
<div class="gggl" style="width:130px;border-right:solid 1px #feb535;">13545457878</div>
<div class="gggl" style="width:130px;">13345454545</div>
</div>

<div id="tongxunlu_content" style="border-top:solid 1px #feb535;" onmouseover="javascript:this.style.backgroundColor='whitesmoke';" onmouseout="javascript:this.style.backgroundColor='Transparent';">
<div class="gggl" style="width:210px;border-right:solid 1px #feb535;background-color: #FF0000;">翻译处</div>
<div class="gggl" style="width:170px;border-right:solid 1px #feb535;" title="庭长">庭长</div>
<div class="gggl" style="width:210px;border-right:solid 1px #feb535;background-color: #FF0000;" title="叶尔兰">叶尔兰</div>
<div class="gggl" style="width:142px;border-right:solid 1px #feb535;" title="124578">124578</div>
<div class="gggl" style="width:130px;border-right:solid 1px #feb535;">16854324512</div>
<div class="gggl" style="width:130px;">13945457832</div>
</div>

<div id="tongxunlu_content" style="border-top:solid 1px #feb535;" onmouseover="javascript:this.style.backgroundColor='whitesmoke';" onmouseout="javascript:this.style.backgroundColor='Transparent';">
<div class="gggl" style="width:210px;border-right:solid 1px #feb535;background-color: #FF0000;">翻译处</div>
<div class="gggl" style="width:170px;border-right:solid 1px #feb535;" title="3123">3123</div>
<div class="gggl" style="width:210px;border-right:solid 1px #feb535;background-color: #FF0000;" title="恶趣味">恶趣味</div>
<div class="gggl" style="width:142px;border-right:solid 1px #feb535;" title="3123554">3123554</div>
<div class="gggl" style="width:130px;border-right:solid 1px #feb535;">13935561845</div>
<div class="gggl" style="width:130px;">15845412455</div>
</div>

</div>
</div>
</div>
</div>

<div id="footer">阿勒泰中院技术支持:乌鲁木齐大鹏软件技术服务有限公司 </div>

</body>
</html>
这是源码，可以粘贴出去试试，在IE6上不行，火狐和IE8上位置不会错就是当换行了的单元格同行的边框没显示全！

a_aa_aaa_ 2012-06-06

打赏
举报

001007009 2012-06-05

打赏
举报

楼主最好把你的demo整理精简下贴出来。

yktd26 2012-06-05

打赏
举报

display:inline-block;margin:auto;width:10%;

试试这个，将这三条加在每个div上width根据你的需要调整数值，但是用百分比

如果真的想让div完全像table可以看看display中table table-row等
但遗憾的是这些是css2.2之后的，ie6ie7不支持

mazhai 2012-06-05

打赏
举报

高度宽度给个初始值，中文会自动换行，英文要使用
word-wrap:break-word; overflow:hidden;
开度我忘了是那个浏览器会自动溢出，你自己测一下对于溢出的可以使用css的判断浏览器，记得好像是*号是ie6识别的，+是ie7识别的，然后单独写出不一样的css，我当时就是这么做的，可能不太合理吧，没办法我又不是美工，页面上的问题最好找美工去做，程序人员做出的页面一般都不是很规范的，而且浏览器兼容很烦的！