如何让两个并排的div高度自动一致？

dadiceo 2010-03-01 11:19:54

如何让两个并排的div高度自动一致？
刚刚自学做个网页布局，遇到这个问题，希望高人赐教。先行谢过！
两个div并排，左边用来插入图片（多个），右边对有一些针对图片的文字，要求右边的div与左边高度相同，并自动适应。
代码如下：

<DIV style="BACKGROUND-COLOR: #993399; MARGIN: 0px; WIDTH: 600px; FLOAT: left">
<IMG align=middle src="file:///D:\Desktop\123.jpg">
<IMG align=middle src="file:///D:/Desktop/111.jpg"></DIV>
<DIV style="BACKGROUND-COLOR: #ffccff; MARGIN: 0px; WIDTH: 150px; FLOAT: left">
文字描述
文字描述2
 
 
 
 
 
 
 
 
 </DIV>

...全文

1189 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

KK3K2005 2010-03-01

打赏
举报

table现在就不能用啦？

dadiceo 2010-03-01

打赏
举报

非常感谢你的热情回复。我是淘宝里面用，淘宝支持css,我是刚刚自学的，看了上面的还是不会解决。希望能直接帮我在原代码里改一下。拜谢！！！

夜雨_Jason 2010-03-01

打赏
举报

参考一下这个



<!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三行三列自适应高度布局</title>

<style type="text/css">

body {

	margin:0;

	padding:0;

	font-size:12px;

}

.header {

	width:100%;

	height:50px;

	background:#EEE;

	border-bottom:1px solid #000;

}

.colmask {

	position:relative;

	clear:both;

	width:100%;

	overflow:hidden;

}

.colright, .colmid, .colleft {

	float:left;

	width:100%;

	position:relative;

}

.col1, .col2, .col3 {

	float:left;

	position:relative;

	overflow:hidden;

}

.threecol {

	background:#BBB;

}

.threecol .colmid {

	right:20%;

	background:#CCC;

}

.threecol .colleft {

	right:60%;

	background:#DDD;

}

.threecol .col1 {

	width:58%;

	left:101%;

}

.threecol .col2 {

	width:18%;

	left:23%;

}

.threecol .col3 {

	width:18%;

	left:85%;

}

.footer {

	clear:both;

	width:100%;

	height:50px;

	background:#EEE;

	border-top:1px solid #000;

}

</style>

</head>

<body>

<div class="header"> 这里是头部 </div>

<div class="colmask threecol">

  <div class="colmid">

    <div class="colleft">

      <div class="col1">

        <p>这里是中间</p>

        <p>这里是中间</p>

        <p>这里是中间</p>

        <p>这里是中间</p>

        <p>这里是中间</p>

        <p>这里是中间</p>

        <p>这里是中间</p>

      

      </div>

      <div class="col2"> 这里是左栏 </div>

      <div class="col3">

        <p>这里是右栏</p>

        <p>这里是右栏</p>

        <p>这里是右栏</p>

        <p>这里是右栏</p>

      </div>

    </div>

  </div>

</div>

<div class="footer"> 这里是底部 </div>

</body>

</html>

KK3K2005 2010-03-01

打赏
举报

div+css布局比table要灵活
但是明显的固定规则布局用table可能更简单而且兼容性好
google很多页面就是表格布局

表格TD内的内容外面还可以在加个DIV，SPAN什么的来修饰

表格属性http://www.dreamdu.com/xhtml/attribute_cellpadding_cellspacing/

dadiceo 2010-03-01