CSS 浮动布局如何实现自由拉伸

图片描述

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>aliyun</title>
        <link rel="stylesheet" href="css/main.css" />
    </head>
<body>
    <div class="top"></div>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

css如下

*{margin:0;padding:0;}
body{font-size: 14px;font-family: "微软雅黑";}
.top{width: 100%;height: 50px;background-color:#373D41;}
.content{width:100%;height:1000px;}
.content .left{width: 180px;height: 1000px;background-color: #333744;float: left;}
.content .right{width:1000px;height: 1000px;background-color:#ccc;float: right;}

现在怎样让上图中的 左保持不变 右按浏览器窗口百分之缩放尼

阅读 4.7k
1 个回答

flex布局

.content{
    display:flex
}
.left{
    flex: 0 0 180px
}
.right{
    flex:1
}

bfc

.left{
    float:left
    width:180px
}
.right{
    overflow:hidden
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题