不看会后悔的Windows XP之经验谈	简单快捷DIY实用家庭影院

div自适应高度...见者有分，问题解决了另开贴给分！！

楼主skyhaha（内存严重不足）2006-09-19 17:11:40 在 .NET技术 / ASP.NET 提问

以下结构“一行三列”怎么才可以自适应高度啊？
<div>
<div>标题1</div>
<div>标题2</div>
<div>标题3</div>
</div>
“标题1”和“标题3”的高度根据“标题2”的高度变化而变化。这个CSS怎么写啊。不用JS写。问题点数：100、回复次数：38Top

1 楼zahuifan（杂烩饭）回复于 2006-09-19 17:13:13 得分 3

关注Top

2 楼eastjazz（德仔&我是小仔仔 www.dezai.cn）回复于 2006-09-19 17:15:14 得分 3

（收集）DIV+CSS 自适应高度

http://www.dezai.cn/study/Article_Show.asp?ArticleID=7289

Top

3 楼Atwind（一线风）回复于 2006-09-19 17:15:56 得分 3

这是一行三列？？

另存HTM文件试试看Top

4 楼skyhaha（内存严重不足）回复于 2006-09-19 17:21:18 得分 0

这个高度都是根据内容来撑开DIV的，只要有1个变化另外2个也跟着变，不管怎么变3个DIV高度都是一样的。Top

5 楼WAWQ（两点水）回复于 2006-09-19 17:23:33 得分 3

是不是可以考虑在最外面的 div 作手脚 ~Top

6 楼myminimouse（坚决不用baidu）回复于 2006-09-19 17:27:16 得分 3

帮顶,看到div就不爽Top

7 楼skyhaha（内存严重不足）回复于 2006-09-19 17:27:21 得分 0

在IE里面有一些方案是可以解决的，Firefox就不可以了。W3C快点弄个世界通用的浏览器多好啊，就可以不用考虑各个浏览器的兼容问题了。Top

8 楼xuyan9132（序言）回复于 2006-09-19 17:30:48 得分 3

就像楼主所说那样，高度都是根据内容来撑开DIV的，三个的总高度是不变的呀，不知道用相对坐标能否实现，关注Top

9 楼anheizhizi（目标:★★★★★）回复于 2006-09-19 17:35:16 得分 3

UP + MARKTop

10 楼spz007123（）回复于 2006-09-19 17:42:42 得分 3

顶~~~接分Top

11 楼spz007123（）回复于 2006-09-19 17:43:06 得分 3

upupTop

12 楼guokecool（）回复于 2006-09-19 17:44:12 得分 3

UP + MARK
顶~~~接分upupTop

13 楼cat_hsfz（我的新Blog在http://cathsfz.cnblogs.com）回复于 2006-09-19 19:35:09 得分 3

““标题1”和“标题3”的高度根据“标题2”的高度变化而变化。”——变化的规则是什么？保证外<div>的总高度不变？Top

14 楼lizhizhe2000（武安侯）回复于 2006-09-19 19:41:58 得分 3

给你顶下，关注中Top

15 楼skyhaha（内存严重不足）回复于 2006-09-19 20:01:27 得分 0

就和表格的一行三列一样，最外层的DIV高度肯定也是在变的。Top

16 楼ice2927276（）回复于 2006-09-19 20:22:14 得分 3

楼主好像没说清楚,要怎么变化?Top

17 楼skyhaha（内存严重不足）回复于 2006-09-20 08:54:32 得分 0

表格的一行三列是怎么变的，这个就怎么变。Top

18 楼ldw701（★水若寒★）回复于 2006-09-20 09:55:47 得分 3

UpTop

19 楼skyhaha（内存严重不足）回复于 2006-09-20 09:56:26 得分 0

没人知道吗？Top

20 楼magicworks（）回复于 2006-09-20 10:41:11 得分 3

UP + MARKTop

21 楼sdzbbz（）回复于 2006-09-20 10:45:47 得分 3

帮顶Top

22 楼dyjqk（球圣）回复于 2006-09-20 10:46:58 得分 3

接分。呵呵Top

23 楼sic_hcq（）回复于 2006-09-20 10:52:45 得分 3

<div>不是都是独占一行的吗，？？
你那样怎样能表达一行三列哇。？？Top

24 楼wuxingmaxail（君子坦荡荡小人常戚戚）回复于 2006-09-20 11:18:22 得分 3

有三列？存了看看！Top

25 楼yiyioo（天一(一个人的Team)）回复于 2006-09-20 11:47:16 得分 3

不知道楼主变的规则是什么?

表格的一行三列是怎么变的，这个就怎么变。
--表格的一行三列的变的规则也是跟代码相关的啊,Top

26 楼zhouyan024（SPRINGPRINCE）回复于 2006-09-20 12:54:14 得分 3

接分Top

27 楼Terry_Sky（）回复于 2006-09-20 13:18:59 得分 3

LS做广告还真下血本 ~~帮顶
LZ，没弄明白你的意思 ~~
Top

28 楼odin223（）回复于 2006-09-20 13:51:19 得分 3

upTop

29 楼skyhaha（内存严重不足）回复于 2006-09-20 14:12:34 得分 0

把下面的代码在IE和Firefox中看一下就知道了，我的意思就是要把DIV做的和表格一样的效果，
下面的代码在IE中显示是可以的，在Firefox中就乱了，因为我不确定第二列的内容有多少，可是总宽是固定的，第二列的内容多的话肯定会自动换行，这样高度就被撑开，可是另外2列的高度却是不变的，IE是认这种做法的（不严格），Firefox不认，所以我想做1列的高度变，另外2列的高度也跟这变，如果要是1行三列弄好的话，两行三列，三行三列等等，就可以搞定了。用CSS来解决。我相信肯定有种很巧妙的办法来弄，大家一起来想想。先谢了。
<table border="1" width="150px">
<tr>
<td width="40px">标题1</td>
<td>标题2标题2标题2标题2标题2标题2</td>
<td width="40px">标题3</td>
<td width="40px">标题1</td>
<td>标题2标题2标题2标题2标题2标题2</td>
<td width="40px">标题3</td>
</tr>
</table>
<br/>
<br/>
<div style="width: 154px;border: 1px solid #ccc;">
<div style="float:left;width:40px;">标题1</div>
<div style="float:left;width:70px;border-left:1px solid #ccc;border-right:1px solid #ccc;">标题2标题2标题2标题2标题2标题2</div>
<div style="float:left;width:40px;">标题3</div>
</div>
<div style="width: 154px;border: 1px solid #ccc;">
<div style="float:left;width:40px;">标题1</div>
<div style="float:left;width:70px;border-left:1px solid #ccc;border-right:1px solid #ccc;">标题2标题2标题2标题2标题2标题2</div>
<div style="float:left;width:40px;">标题3</div>
</div>Top

30 楼lanserzhao（）回复于 2006-09-20 14:16:54 得分 2

div里可以设置的
ASP.NET(c#,Ajax)技术讨论群30417196（限已工作人士）Top

31 楼skyhaha（内存严重不足）回复于 2006-09-20 14:19:48 得分 0

设置啥？Top

32 楼luck0235（风平浪静时人人都能掌舵）回复于 2006-09-20 14:29:49 得分 0

<html>
<head>
<style>
#z{ height:100px;width:600px; background-color: #CCCCCC;}
#a{ width:200px; background-color:#FF0000;float:left;}
#b{ width:200px; background-color:#00ff00;float:left;}
#c{ width:200px; background-color:#0000ff;float:left;}
.x{ height:68px;}
</style>
</head>
<body>
<div id="z">
<div id="a" class="x">标题1</div>
<div id="b" class="x">标题2</div>
<div id="c" class="x">标题3</div>
</div>
</body>
</html>Top

33 楼Devin_lee（感觉）回复于 2006-09-20 14:39:51 得分 3

34 楼luck0235（风平浪静时人人都能掌舵）回复于 2006-09-20 15:00:15 得分 20

Sorry，刚没看到楼主下面的说明。FireFox中“float:left”这个东西非常重要，你的第二行的DIV没指定它，它当然以"第一行第三列"为基准，而不是以"第一行"为基准，所以你必须为"每行"都加上“float:left”，另外你的"两行"应该包含在一个DIV中吧，就好像两个<tr>要包含在<table>中一样，只有当内嵌Div宽度超过外部DIV时，它们才会换行，我改了下代码，楼主看看效果：

<table border="1" width="150px">
<tr>
<td width="40px">标题1</td>
<td>标题2标题2标题2标题2标题2标题2</td>
<td width="40px">标题3</td>
<td width="40px">标题1</td>
<td>标题2标题2标题2标题2标题2标题2</td>
<td width="40px">标题3</td>
</tr>
</table>
<br/>
<br/>
<div style="width:154px;">
<div style="width: 154px;border: 1px solid #ccc;float:left;">
<div style="float:left;width:40px;">标题1</div>
<div style="float:left;width:70px;border-left:1px solid #ccc;border-right:1px solid #ccc;">标题2标题2标题2标题2标题2标题2</div>
<div style="float:left;width:40px;">标题3</div>
</div>
<div style="width: 154px;border: 1px solid #ccc;float:left;">
<div style="float:left;width:40px;">标题1</div>
<div style="float:left;width:70px;border-left:1px solid #ccc;border-right:1px solid #ccc;">标题2标题2标题2标题2标题2标题2</div>
<div style="float:left;width:40px;">标题3</div>
</div>
</div>
Top

35 楼sfar（唏嘘2005）回复于 2006-09-20 15:16:36 得分 3