使用css3的flex盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度）

最新推荐文章于 2023-10-25 21:32:24 发布

MINO吖

最新推荐文章于 2023-10-25 21:32:24 发布

阅读量991

点赞数

分类专栏： # HTML # CSS 文章标签： flex 两栏布局

本文链接：https://blog.csdn.net/qq_36157085/article/details/104141871

版权

HTML 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<style>  
.parent{
  height:500px;  
  border:1px solid #222;  
  display:flex;/*设为伸缩容器*/  
  flex-flow:row;/*伸缩项目单行排列*/  
}  
.stable{  
  width:200px;/*固定宽度*/  
  border:1px solid  #ccc;  
  margin:20px;  
}  
.change{  
  flex:1;/*这里设置为占比1，填充满剩余空间*/  
  border:1px solid #ff4400;  
  margin:20px;  
}  
</style>  
</head>  
<body>  
  <div class="parent">  
    <div class="stable">stable 固定宽度200px</div>  
    <div class="change">changeable 可变宽度</div>  
  </div>  
</body>  
</html>

附：传统模式（利用float浮动实现）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
  .parent{
    height: 500px;
    border:1px solid #222;  
  }
  .stable{
    float: left;
    height: 460px;
    width: 200px;
    border:1px solid  #ccc;  
    margin:20px;  
  }
  .change{
    height: 460px;
    border:1px solid #ff4400;  
    margin:20px 20px 20px 260px;  
  }
</style>
</head>
<body>
  <div class="parent">
    <div class="stable">stable 固定宽度200px</div>
    <div class="change">changeable 可变宽度</div>
  </div>
</body>
</html>

https://www.cnblogs.com/xiaodabao/p/5925511.html

MINO吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用css3的flex盒模型来实现两栏布局（左侧固定宽度，右侧自适应宽度）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ height:500px; border:1px solid #222; display:flex;/*设为伸缩容器*/ flex-flow:row;...
复制链接

扫一扫

专栏目录