请教,如何让左侧的列能自动和右侧一样高?
1、也就是说,我左侧的列内容少,右侧的多。因为要加边框线,会导致左右不等高。请教有什么办法吗?2、另外,如果我有一图片做背景(图片的高度有限),在第一个问题解决的情况下(左右等高时),如何让图片一直在列的底部?补充:不能用vlign=bottom,否则文字也到底部了。
谢谢!
<div id="img_text_style" style="width:600px"> <div id="left" style="float:left; width:300; height:500; border:1px dashed silver;"> <h3 style="color:red; padding-left:1em;">左侧标题</h3> 具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具 体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字 内容 <div id="my_image" style="position:absolute; margin-top:16em; margin-left:12em;"> <img src="123-2.jpg" width="100" height="60" alt="" /> </div> </div> <div id="right" style="height:500; border:1px dashed silver;"> <h3 style="color:red; padding-left:1em;">右侧标题</h3> 具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体 文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内 容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体 文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内 容具体文字内容具体文字内容。。。。。。 </div> </div>
<div id="img_text_style" style="width:600px; height:auto; border:1px dashed silver;"> <div id="right" style="float:right; margin-top:0; width:250px; height:auto; min-height:500px; border-left:1px dashed silver;"> <h3 style="color:red; padding-left:1em;">右侧标题</h3> <p>具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容。。。。。。</p> <p>具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容。。。。。。</p> <p>具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容。。。。。。</p> </div> <div id="left" style="width:300px; "> <h3 style="color:red; padding-left:1em;">左侧标题</h3> <p>具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容具体文字内容</p> <div id="my_image" style="margin-left:6em; margin-top:10em;"> <img src="123-2.jpg" width="100" height="60" alt="" /> </div> </div> </div>
<div id="tableTest" style="width:600px; height:auto; border:1px dashed silver;"> <table cellpadding="3px" cellspacing="9px" border="1"> <tr> <td width=50% valign="top"> <h3 style="color:red;">左侧标题</h3> <p>具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容。。。</p> </td> <td width=50%> <h3 style="color:red;">右侧标题</h3> <p>具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容。。。</p> <p>具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容。。。</p> <p>具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容具体内容。。。</p> </td> </tr> <tr> <td align="right"><img src="123.jpg" width="80" height="60" alt="" /></td> <td> </td> <tr> </table> </div>