您的位置：首页 > Web前端 > CSS

用CSS、HTML编写一个两列布局的网页，右侧宽度为200px，左侧自动扩展。

2013-10-08 15:23 495 查看

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#left
{
height:100px;
margin-right:200px;
background-color:green;
}
#right
{
height:100px;
width:200px;
float:right;
background-color:red;
}
</style>
</head>
<body>
<!-#right必须在#left之上-->
<div id="right"></div>
<div id="left"></div>
</body>
</html>

#right在#left之下时,由结果看来，设置float和position:absolute的元素会脱离文档流，其他周围元素会忽视它，而移动自身位置。故浮动或绝对定位的元素只影响位于其后的元素，其前的元素会不受影响。另外，浮动框的移动是基于原始位置左右移动，而不会上下移动，直到遇到另一浮动框的边缘或者包含框。而div正常会占据一整行。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航