美文网首页
flex 左侧固定宽度,右侧自适应

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

作者: igor_d140 | 来源:发表于2019-10-24 15:51 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex</title>
    <style>
        html,body {
            padding: 0;
            margin: 0;
        }
        .container{
            width: 100%;
            height: 100vh;
            display: flex;
        }
        .sidebar::before {
            content: ' ';
            width: 200px;
            height: 100%;
        }
        .sidebar {
            display: inherit;
            background: #f5f5f5;
        }
        .main {
            background: gray;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar"></div>
        <div class="main"></div>
    </div>
</body>
</html>

相关文章

  • 双栏式布局

    页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应。总之就是一边固定宽度,一边自适应...

  • flex的左右布局,右侧出现x轴滚动条

    场景: flex的左右布局,左侧菜单宽度固定,右侧自适应。 实现: .main{width:100%;disp...

  • 常用网页布局

    一、多列布局 (1) 宽度自适应布局 两栏布局 左侧固定右侧自适应 右侧固定左侧自适应 技术原理(左侧固定右侧自适...

  • flex 左侧固定宽度,右侧自适应

  • CSS 实现两栏自适应布局

    首先要明确:两栏自适应布局是指:左侧固定宽,右侧宽度自适应 公共代码 (一) float (二) BFC (三)flex

  • CSS自适应布局

    今天小编介绍自适应布局实现方法的demo,1)左侧固定宽度,右侧自适应,随着窗口的宽度而变化;2)右侧固定宽度,左...

  • CSS布局

    1. 实现一个两栏布局,左侧固定宽度200px,右侧自适应宽度,附上预览接。 使用浮动做布局 使用 flex 布局...

  • CSS布局&媒体查询

    1. 实现一个两栏布局,右侧固定宽度200px,左侧自适应宽度,附上预览链接。 浮动布局使用 flex 布局 2....

  • 两列布局,左侧固定宽度右侧自适应

    两列布局,左侧固定宽度右侧自适应 HTML 方案一: 双 float + calc 计算右侧宽度 方案二:左侧 f...

  • 两栏布局

    两栏布局(左侧固定宽度,右侧自适应) html结构 一.左侧float:left;右侧margin-left; 二...

网友评论

      本文标题:flex 左侧固定宽度,右侧自适应

      本文链接:https://www.haomeiwen.com/subject/gchdvctx.html