各位大神，这个任务代码怎么写？
12345
慕粉175230740
2017-03-12
7 回答
绝对定位table
绝对定位table外的div
查看2条回复
因为要求是对于浏览器窗口居中，所以一般是要脱离文档里了。
先把html，body，都设置高度为100%；
添加一个容器元素，高度也是100%，然后positon:absolute;
设置top:0; left:0;
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>父元素高度确定的多行文本</title> <style> .wrap{height:300px;background:#ccc} html,body{ height:100%; } table{ height:100%; } body>div{ height:100%; position:absolute; top:0; left:0; background-color:orange; } </style> </head> <body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </td></tr></tbody></table> <!--下面是代码任务区--> <div> <table> <tbody> <tr> <td> <div> <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/> </div> </td> </tr> </tbody> </table> </div> </body> </html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>父元素高度确定的多行文本</title>
<style>
body{
background-color:blue;
}
.one{
position:absolute;
height:100%;
background-color:green;
}
.two{
height:500px;
width:100px;
background-color:red;
}
table,tr,td{
height:100%;
}
</style>
</head>
<body>
<div class="one">
<!--下面是代码任务区-->
<table><tr><td>
<div class="two"><table><tr><td>
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/></td></tr></table>
</div></td></tr></table>
</div>
</body>
</html>
<style>
.wrap{height:300px;background:#ccc}
</style>
</head>
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr>
<tr><td>
<div>
<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
</div>
</td></tr>
</tbody></table>/*你看看OK吗？我不是大神，我是萌新*/
</body>
举报
0/150
提交
取消
