<div>Left</div>
<div>Right</div>
</div>
纯css的:如果left宽度固定的话(比如:200px),就给外面那个大div弄个宽200px的背景图,只在y方向一直重复
要是left宽度不固定或者你愿意用javascript,就用js取得两个div,判断高度,让矮的那个高度等于高的那个:
<div id="left">Left</div>
<div id="right">Right</div>
<script>
function sameH(el1,el2) {
var a = document.getElementById(el1)
var b = document.getElementById(el2)
if (a &&b) {
if (a.scrollHeight <b.scrollHeight) {
a.style.height = b.scrollHeight + "px"
}
else {
b.style.height = a.scrollHeight + "px"
}
}
else {
alert("sameH函数需要的对象id不存在或创建在函数运行之后") }
}
sameH("left","right")//传入你的两个div的id
</script>
最简单的方法:(缺点不兼容老版本的ie)<fieldset>
<legend>标题</legend>
<p>内容</p>
</fieldset>
====================
方法2:
<div style="border:1px solid #666height:100pxwidth:300pxposition:relative">
<h3 style=" background:#FFFdisplay:blockheight:20pxwidth:50pxposition:absoluteleft:10pxtop:-30pxtext-align:center">标题</h3>
<p>内容</p>
</div>
注:设置position:absolute并控制坐标(left、top)将标题调整到理想位置,设置白色背景挡住边框模拟出效果