DIV+CSS布局中左右两列自适应高度代码

人气：　来源：本站原创　作者：佚名　所属栏目：其他类　[切换到繁體中文]

介绍：很多朋友都困惑于DIV+CSS布局中左右两列如何自适应高度的问题，希望此文对您有用。

演示：

<!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=gb2312" />
<title>站长手册_特效演示_DIV+CSS布局中左右两列自适应高度代码</title>
<style><!--body,td{font-size: 12px;}--></style>
<style type="text/css">
<!--
*{
	margin :0px;
	padding: 0px;
}
.da_div{
	width: 750px;
	margin:0px auto;
	margin-top:3px;
	overflow:hidden
}
.top_200{
	border-top:1px solid #afafaf;
	width: 200px;
	float: left;
	overflow:hidden
}
.t200_text{
	width: 200px;
	line-height:1.6em;
	font-size: 12px;
}
.top_540{
	width :540px;
	height: 12px;
	float:right;
	border-top: 1px solid #afafaf;
}
.t540_text{
	font-size: 12px;
	width: 200px;
	line-height:1.6em;
}
.da_div_xia{
	width: 750px;
	margin: 0px auto 0px auto;
}
-->
</style>
</head>
<body bgcolor="" 无>
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<div class="da_div">
  <div class="top_540">
    <div class="t540_text">fdsfjdsklfds</div>
  </div>
  <div class="top_200">
    <div class="t200_text">fdfdsfdsfdsfds<br />
      fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />
      fds</div>
  </div>
</div>
<div class="da_div_xia">
  <div class="top_540"> </div>
  <div class="top_200"> </div>
</div>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：无
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

<div class="da_div">
  <div class="top_540">
    <div class="t540_text">fdsfjdsklfds</div>
  </div>
  <div class="top_200">
    <div class="t200_text">fdfdsfdsfdsfds<br />
      fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />
      fds</div>
  </div>
</div>
<div class="da_div_xia">
  <div class="top_540"> </div>
  <div class="top_200"> </div>
</div>