本文介绍了两种常见的网页两列布局方法：一种是固定宽度的左侧栏与自适应宽度的右侧栏；另一种则是固定宽度的右侧栏与自适应宽度的左侧栏。通过具体的HTML和CSS代码示例，展示了如何实现这些布局。
1 两列右列宽度自适应：
<thml>
<head>
<style>
.left{
border:1px solid #669911;
background:#uuffrr;
width:200px;
float:left;
}
.right{
border: 1px solid #eeffgg;
background: #uuffrr;
}
</style>
</head>
<body>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
2 两列左列列宽度自适应：
<thml>
<head>
<style>
#left{
width:100%;
margin-left:-200px;
float:left;
background:#efefef;
}
#innerLeft{
margin-left:300px;
border: 1px dotted #556688;
}
#right{
width:200px;
float:right;
background:green;
border: 1px solid @556688;
}
p{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div id="left">
<div id="innerLeft"><p>左列</p></div>
</div>
<div id="right"><p>右列</p></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
