实现两栏布局
.aside是左边的盒子，
.main是右边的盒子
下面所有结果的效果图：
浮动+margin
给左边盒子.aside添加一个浮动，之后再给右盒子.main设置一个marign-left ，将其挤到右边去，形成左边定宽，右边自适应。
其中margin-left的值是盒子.aside的宽度。
<style>
* {
margin: 0;
padding: 0;
}
.aside {
float: left;
width: 200px;
background-color: pink;
}
.main {
margin-left: 200px;
/* 这里不设置宽度也可以 */
/* width: auto; */
width: 100%;
min-height: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="contain">
<div class="aside">这是左侧的广告</div>
<div class="main">这是右侧的内容</div>
</div>
</body>
浮动+BFC
给左边盒子.aside添加一个浮动，之后可以给右盒子.main设置一个overflow:hidden开启BFC，清除左侧盒子.aside浮动带来的影响，形成左边定宽，右边自适应。
<style>
* {
margin: 0;
padding: 0;
}
.aside {
float: left;
width: 200px;
background-color: pink;
}
.main {
/* 开启BFC，清除左侧浮动的影响 */
overflow: hidden;
/* 这里不设置宽度也可以 */
width: auto;
/*
清除了浮动，会将两个子元素处于同一水平线
此时不能将宽度设置为100%，会将.main挤压到第二行去 */
/* width: 100%; */
min-height: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="contain">
<div class="aside">这是左侧的广告</div>
<div class="main">这是右侧的内容</div>
</div>
</body>
左盒子定位+margin
此时将左边盒子.aside的浮动，改变成定位就行了，右盒子.main还是设置一个.marign-left ，将其挤到右边去，形成左边定宽，右边自适应。
其中margin-left的值是盒子.aside的宽度。
定位需是absolute/fixed绝对定位或固定定位，但固定定位不符合题意，则使用absolute绝对定位；注意子绝父相。
<style>
* {
margin: 0;
padding: 0;
}
.contain {
position: relative;
}
.aside {
/* 绝对定位才能脱离文档，相对定位不行 */
position: absolute;
left: 0;
top: 0;
width: 200px;
background-color: pink;
}
.main {
margin-left: 200px;
/* 这里不设置宽度也可以 */
/* width: auto; */
width: 100%;
min-height: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="contain">
<div class="aside">这是左侧的广告</div>
<div class="main">这是右侧的内容</div>
</div>
</body>
右盒子定位+float
给左边盒子.aside添加一个浮动，然后将右盒子.main的marign-left 改成定位，将定位到右边去，形成左边定宽，右边自适应。
定位仍然使用absolute绝对定位；注意子绝父相。
<style>
.contain {
position: relative;
}
.aside {
float: left;
width: 200px;
background-color: pink;
}
.main {
/* 绝对定位才能脱离文档，相对定位不行 */
position: absolute;
left: 200px;
top: 0;
/* 此时脱离了文档流，必须设置宽度为 100% 才能充满屏幕 */
width: 100%;
min-height: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="contain">
<div class="aside">这是左侧的广告</div>
<div class="main">这是右侧的内容</div>
</div>
</body>
左右盒子定位
可以将左右盒子都是用定位position:absolute；来设置左侧盒子固定宽度，右侧盒子自适应。
<style>
* {
margin: 0;
padding: 0;
}
.contain {
position: relative;
}
.aside {
/* 绝对定位才能脱离文档，相对定位不行 */
position: absolute;
left: 0;
top: 0;
width: 200px;
background-color: pink;
}
.main {
/* 绝对定位才能脱离文档，相对定位不行 */
position: absolute;
left: 200px;
top: 0;
/* 此时脱离了文档流，必须设置宽度为 100% 才能充满屏幕 */
width: 100%;
min-height: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="contain">
<div class="aside">这是左侧的广告</div>
<div class="main">这是右侧的内容</div>
</div>
</body>
flex布局
先将父盒子.contain设置为弹性容器display:flex;，然后给右侧盒子.main设置flex:1;，使其自动撑满剩余空间。
<style>
* {
margin: 0;
padding: 0;
}
.contain {
/* 将父容器设置为弹性容器 */
display: flex;
}
.aside {
background-color: pink;
}
.main {
/* 内容区会自动放大占满剩余空间 */
flex: 1;
min-height: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="contain">
<div class="aside">这是左侧的广告</div>
<div class="main">这是右侧的内容</div>
</div>
</body>
圣杯布局
请注意，DOM 元素布局与之前不一样。
实现步骤：
- 给左盒子
.aside设置宽、背景颜色和向左浮动； - 给右盒子
.main设置宽 (100%)、背景颜色和向左浮动； - 此时因为右盒子
.main的宽度是100%，左盒子.aside会处于.main的下方； - 给左盒子
.aside设置margin-left: -100%;让其处于布局的左侧； - 给父盒子
.contain设置margin-left: 200px;让其向右移动 200px； - 最后给左盒子
.aside设置相对定位，其中left: -200px;就可以实现圣杯布局了。
<style>
* {
margin: 0;
padding: 0;
}
/* 父盒子 */
.contain {
/* 1.将盒子整体向右移动 200px */
/* 使用定位也可以 */
/* position: relative;
left: 200px;
top: 0; */
margin-left: 200px;
}
/* 左侧固定盒子 */
.aside {
float: left;
/* 2.
把左侧的子盒子像左移动 200px
形成左右对齐的布局
*/
/* 使用绝对定位会脱离文档流不要使用 */
position: relative;
left: -200px;
top: 0;
/* 把此盒子放到最左侧去形成左右布局 */
margin-left: -100%;
width: 200px;
background-color: pink;
}
/* 右侧自适应盒子 */
.main {
float: left;
width: 100%;
min-height: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="contain">
<div class="main">这是右侧的内容</div>
<div class="aside">这是左侧的广告</div>
</div>
</body>
双飞翼布局
请注意：DOM 结构中的.main中间包含了一层，与圣杯布局有点区别。
方法1
实现步骤：
- 给左盒子
.aside设置宽、背景颜色和向左浮动； - 给右盒子
.main设置宽 (100%)和向左浮动； - 此时因为右盒子
.main的宽度是100%，左盒子.aside会处于右盒子.main的下方； - 给左盒子
.aside设置margin-left: -100%;让其处于布局的左侧； - 给
.main.context设置背景颜色和margin-left: 200px，让其向右移动 200px； - 此时双飞翼布局就完成了。
<style>
* {
margin: 0;
padding: 0;
}
/* 左侧固定盒子 */
.aside {
float: left;
/* 把此盒子放到最左侧去形成左右布局 */
margin-left: -100%;
width: 200px;
background-color: pink;
}
/* 右侧自适应盒子 */
.main {
float: left;
width: 100%;
/* background-color: deeppink; */
}
.main .context {
margin-left: 200px;
min-height: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="contain">
<div class="main">
<div class="context">这是右侧的内容</div>
</div>
<div class="aside">这是左侧的广告</div>
</div>
</body>
方法2
注意：DOM 结构方法1 中的有所区别。
实现步骤与方法1区别不大，就是将给左盒子.aside设置margin-left: -100%;改成margin-right: -100%;。
<style>
* {
margin: 0;
padding: 0;
}
/* 左侧固定盒子 */
.aside {
float: left;
/* 把此盒子放到最左侧去形成左右布局 */
margin-right: -100%;
width: 200px;
background-color: pink;
}
/* 右侧自适应盒子 */
.main {
float: left;
/* 设置宽度为 100% 才会充满了屏，会让将盒子挤到新的一行去 */
width: 100%;
/* background-color: deeppink; */
}
.main .context {
margin-left: 200px;
min-height: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="contain">
<div class="aside">这是左侧的广告</div>
<div class="main">
<div class="context">这是右侧的内容</div>
</div>
</div>
</body>
880
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
