本文探讨如何使用CSS的margin和float属性实现两列布局，其中一列定宽，另一列自适应。通过Solution One和Solution Two两种方法，详细解释了负外边距和浮动布局的原理，以及如何处理左栏不定宽的情况，以适应不同浏览器窗口大小。
前言
有时候觉得对浮动布局，定位这些思考得其实还不够深入。
网上的说法很多，它们很多掺杂各种浏览器兼容或者一些清除浮动等等的hack。但是我觉得还是应该从简入深，理解一下它的本质。
两列布局
所谓的两列布局，首先是左边栏是定宽，右边主栏是自适应的。
一般看到自适应我们可很容易想到就是百分数，浮动布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two Column</title>
<style type="text/css">
.container{
width:100%;
margin:0 auto;
}
.left{
width:200px;
background: red;
height: 300px;
}
.main{
width: 100%;
background: blue;
height: 300px;
}
</style>
</head>
<body>
<div class=
最低0.47元/天 解锁文章
扫一扫
911
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
