头部高80 头部右下角有随便个超链接
左下角宽200 右下角宽度自适应 应与头部一样
DIV布局请教
答案:2 悬赏:40 手机版
解决时间 2021-08-11 16:54
- 提问者网友：聂風
- 2021-08-11 04:53
最佳答案
- 五星知识达人网友：北方的南先生
- 2021-08-11 06:08
<div style="width:900px;height:auto;">
<div style="width:100%;height:80px;display:table;">
<div style="width:100%;height:100%;display:table-cell;text-align:right:vertical-align:bottom;"><a href="#">随便个超链接</a></div>
</div>
<div style="width:200;height:200px;float:left;"></div>
<div sthle="width:100%;height:200px;float:right;"></div>
</div>
全部回答
- 1楼网友：迟山
- 2021-08-11 07:05
<!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=utf-8" /><title>无标题文档</title><style type="text/css"> <!-- body { font: 100% 宋体, 新宋体; background: #666666; margin: 0; padding: 0; text-align: center; color: #000000;}.twoColFixRtHdr #container { width: 780px; background: #FFFFFF; margin: 0 auto; border: 1px solid #000000; text-align: left; } .twoColFixRtHdr #header { background: #DDDDDD; padding: 0 10px 0 20px; height:80px;} .twoColFixRtHdr #header h1 { margin: 0; padding: 10px 0; }.twoColFixRtHdr #sidebar1 { float: left; width: 200px; background: #EBEBEB; padding: 15px 10px;}.twoColFixRtHdr #mainContent { margin: 0 0 0 250px; padding: 0 20px; } .twoColFixRtHdr #footer { padding: 0 10px 0 20px; background:#DDDDDD; } .twoColFixRtHdr #footer p { margin: 0; padding: 10px 0; }.fltrt { float: right; margin-left: 8px;}.fltlft { float: left; margin-right: 8px;}.clearfloat { clear:both; height:0; font-size: 1px; line-height: 0px;}--> </style><!--[if IE 5]><style type="text/css"> .twoColFixRtHdr #sidebar1 { width: 220px; }</style><![endif]--><!--[if IE]><style type="text/css"> .twoColFixRtHdr #sidebar1 { padding-top: 30px; }.twoColFixRtHdr #mainContent { zoom: 1; }</style><![endif]--></head>
<body class="twoColFixRtHdr">
<div id="container"> <div id="header"><h1>标题</h1> <!-- end #header --></div> <div id="sidebar1"><h3>Sidebar1 内容</h3><p>此 div 上所显示的背景色刚好与内容等宽。如果您喜欢改用分界线，而且 #mainContent div 将始终包含较多的内容，请在 #mainContent div 的右边缘放置一个边框。 </p> <p>Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p> <!-- end #sidebar1 --></div> <div id="mainContent"><h1> 主要内容 </h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.</p> <h2>H2 级别的标题 </h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> <!-- end #mainContent --></div> <!-- 这个用于清除浮动的元素应当紧跟 #mainContent div 之后，以便强制 #container div 包含所有的子浮动 --><br class="clearfloat" /> <div id="footer"><p>脚注</p> <!-- end #footer --></div><!-- end #container --></div></body></html>
我要举报
如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
点此我要举报以上问答信息
大家都在看
推荐资讯