使用css3弹性盒模型怎么实现元素宽度自适应

2023-06-08 06:06:56 254人浏览独家记忆

摘要

使用css3弹性盒模型怎么实现元素宽度自适应？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、css实现左侧宽度固定右侧宽度自适应定位<!DOCTYPE h

使用css3弹性盒模型怎么实现元素宽度自适应？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

一、css实现左侧宽度固定右侧宽度自适应

定位

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>自适应</title>    <style>        *{            padding: 0;            margin: 0;        }        .left{            background: red;            width: 200px;            height: 200px;            position: absolute;            left: 0;            top:0;        }        .right{            background: blue;            height: 200px;            margin-left: 210px;        }    </style></head><body>    <div class="left">        定宽    </div>    <div class="right">        自适应</div></body></html>

浮动

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>自适应</title>    <style>        *{            padding: 0;            margin: 0;        }        .left{            background: red;            width: 200px;            height: 200px;            float: left;        }        .right{            background: blue;            height: 200px;            margin-left: 210px;        }    </style></head><body>    <div class="left">        定宽    </div>    <div class="right">        自适应</div></body></html>

margin

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>自适应</title>    <style>        *{            padding: 0;            margin: 0;        }        .left{            background: red;            width: 200px;            height: 200px;        }        .right{            background: blue;            height: 200px;            margin-top: -200px;            margin-left: 210px;        }    </style></head><body>    <div class="left">        定宽    </div>    <div class="right">        自适应</div></body></html>

二、css3弹性盒模型实现自适应

上下高度固定中间高度自适应

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        *{            margin: 0;            padding: 0;        }        body,html{            height: 100%;        }        #contain{            display: flex;            flex-direction: column;            height: 100%;        }        #top{           height: 200px;            background: red;        }        #center {            flex: 1;            background: blue;        }        #bottom{            height: 100px;            background: green;        }    </style> </head><body><div id="contain">    <div id="top">你好</div>    <div id="center">你好</div>    <div id="bottom">你也好</div></div></body></html>

左侧宽度固定右侧宽度自适应

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title>    <style>        * {            margin: 0;            padding: 0;        }         #contain {            display: flex;         }         #left {            width: 100px;            height: 200px;            background: #fff8a8;            margin-right: 10px;        }         #right {            flex: 1;             height: 200px;            background: #ff9bad;        }    </style></head><body><div id="contain">    <div id="left"></div>    <div id="right"></div></div></body></html>