关于几种自适应布局

最新推荐文章于 2023-01-30 14:51:03 发布

weixin_34221112

最新推荐文章于 2023-01-30 14:51:03 发布

阅读量148

点赞数

原文链接：https://segmentfault.com/a/1190000015630659

版权

类型一

1，左右两侧，左侧固定宽度200px，右侧自适应占满

代码如下

<!doctype html>

<html>
<head>
<meta charset="utf-8"/>
<title>左右两侧，左侧固定宽度200px，右侧自适应占满</title>
<style>
.box{
    width:600px;
    height:500px;
    border:1px solid #ccc;
    margin:0 auto;
}
.left{
    width:200px;
    height:500px;
    background-color:red;
    float:left;
}
.right{
    
    height:500px;
    background-color:#00f;
    margin-left:200px;
}

</style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html><!doctype html>

<html>
<head>
<meta charset="utf-8"/>
<title>左右两侧，左侧固定宽度200px，右侧自适应占满</title>
<style>
.box{
    width:600px;
    height:500px;
    border:1px solid #ccc;
    margin:0 auto;
}
.left{
    width:200px;
    height:500px;
    background-color:red;
    float:left;
}
.right{
    
    height:500px;
    background-color:#00f;
    margin-left:200px;
}

</style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>
</body>
</html>

运行结果

图片描述

类型二

2，左中右三列左右固定200px 中间自适应占满

代码如下

<!doctype html>

<html>
<head>
<meta charset="utf-8"/>
<title>左中右三列 左右固定200px 中间自适应占满</title>
<style>
.box{
    width:800px;
    height:500px;
    border:1px solid #ccc;
    margin:0 auto;
}
.left{
    width:200px;
    height:500px;
    background-color:red;
    float:left;
}

.right{
    width:200px;
    height:500px;
    background-color:#00f;
    float:right;
}
.zhong{
    height:500px;
    margin:0 200px;
    background-color:#f0f;
}
</style>
</head>
<body>
<div class="box">
    <div class="left"></div>
    <div class="right"></div>
    <div class="zhong"></div>
</div>
</body>
</html>

运行结果

图片描述

类型三

3，上中下三行头部200px高底部200px高中间自适应占满

代码如下

<!doctype html>

<html>
<head>
<meta charset="utf-8"/>
<title>上中下三行 头部200px高 底部200px高 中间自适应占满</title>
<style>
.box{
    width:600px;
    height:400px;
    border:1px solid #ccc;
    margin:0 auto;
    position:relative;
}
.top{
    width:600px;
    height:100px;
    background-color:#ff0;
    position:absolute;
    top:0;
    left:0;
}
.zhong{
    width:100%;
    background-color:#f0f;
    
    position:absolute;
    top:100px;
    bottom:100px;
}
.bottom{
    width:600px;
    height:100px;
    background-color:#f00;
    position:absolute;
    bottom:0;
    left:0;
}
</style>
</head>
<body>
<div class="box">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="zhong"></div>
</div>
</body>
</html>

运行结果

图片描述

总结

固定宽度元素设置float属性为left,自适应元素设置margin属性，margin-left应>=定宽元素宽度。
即
自适应宽度元素定义一个父标签，并设置float属性为left；width为100%；自适应宽度元素设置margin，margin-left应>=定宽元素宽度；
固定宽度元素设置margin-left属性为负值：-100%；
除此之外应注意HTML结构中应先写自适应元素，再写固定宽度元素。

weixin_34221112

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于几种自适应布局

类型一1，左右两侧，左侧固定宽度200px，右侧自适应占满代码如下<!doctype html><html><head><meta charset="utf-8"/><title>左右两侧，左侧固定宽度200px，右侧自适应占满</title>&lt...
复制链接

扫一扫

关于几种自适应布局

类型一

1，左右两侧，左侧固定宽度200px，右侧自适应占满

代码如下

运行结果

类型二

2，左中右三列 左右固定200px 中间自适应占满

代码如下

运行结果

类型三

3，上中下三行 头部200px高 底部200px高 中间自适应占满

代码如下

运行结果

总结

2，左中右三列左右固定200px 中间自适应占满

3，上中下三行头部200px高底部200px高中间自适应占满