本站资源全部免费,回复即可查看下载地址!
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
浮动布局
左右固定宽高，设置左右浮动，中间内容设置overflow:hidden宽度自适应
[HTML] 纯文本查看 复制代码 <!--样式代码-->
<style>
.left {
width: 200px;
height: 300px;
float: left;
background-color: red;
}
.right {
width: 200px;
height: 300px;
float: right;
background-color: green;
}
.middle {
height: 300px;
overflow: hidden; /*重要的一步*/
background-color: gray;
border: 1px solid #000;
}
</style>
<!--结构代码-->
<body>
<!--注意书写结构顺序，先左右后中-->
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>
运行效果：
圣杯布局
三个盒子都设置为浮动，浮动方向都为同一方向，中间内容盒子设置width: 100%,两边内容固定宽高，假设浮动方向都为left，那么左边盒子设置margin-left: -100%; 右边盒子设置为margin-left为负的自身宽度，书写dom结构时先写中间内容的盒子，再写左右盒子
[HTML] 纯文本查看 复制代码 <!--样式-->
<style>
.middle {
width: 100%;
height: 300px;
background-color: gray;
float: left;
}
.left {
width: 200px;
height: 300px;
background-color: red;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height: 300px;
background-color: green;
float: left;
margin-left: -200px;
}
</style>
<!--结构-->
<body>
<!--先写中间的内容区域-->
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</body>
运行效果：
| 
发表于 2020-3-17 15:45:11
