几种左边固定右边自适应的左右布局方式

原创 2017年06月11日 15:09:57
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        body>div{
            margin-top: 10px;
        }
        .fixed{
            width: 100px;
            background-color: #ff0000;
            height: 200px;
        }
        .res{
            background-color: yellow;
            text-align: center;
        }
        .grid{
            display: grid;
            grid-template-columns:100px 1fr;
        }
        .flex{
            display: flex;
        }
        .flex .res{
            flex:1;
        }
        .calc{
            font-size: 0;
        }
        .calc>div{
            display: inline-block;
        }
        .calc .res{
            font-size: 12px;
            width: calc(100% - 100px);
        }
        .margin{
            position: relative;
        }
        .margin .res{
            margin-left: 100px;
        }
        .margin .fixed{
            float: left;
            /*position: absolute;*/
        }

    </style>
</head>
<body>
<div class="grid">
    <div class="fixed"></div>
    <div class="res">grid</div>
</div>

<div class="flex">
    <div class="fixed"></div>
    <div class="res">flex</div>
</div>

<div class="calc">
    <div class="fixed"></div>
    <div class="res">calc</div>
</div>

<div class="margin">
    <div class="fixed"></div>
    <div class="res">margin</div>
</div>
</body>
</html>

左右布局:左边定宽、右边自适应的3种方案

实际的页面开发中经常会遇到左边定宽,右边自适应的需求,特别是一些管理系统,比如左边显示信息或操作列表,右边显示详情,如下所示:、    针对这种布局,首先抽象出页面结构如下: ...

实现左边宽度固定,右边宽度自适应的两列布局

最近面试被问到一个问题,感觉还挺经典,但由于脑子短路回答的不是很好。面试过后,在此简单总结一下这个问题的答案,如果下次遇到可以能回答的好一点。 问题就是:实现一个两列布局,要求左边宽度固定,右边宽...

左右布局:左边定宽、右边自适应

转自: http://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html absolute + padding ...

两栏自适应布局,左边固定和右边固定的区别

说起两栏自适应,我好想研究一番,发现左边固定,右边自适应,和右边固定,左边自适应还有区别之处! 左边自适应代码:         body{             margin: 0;     ...

左边固定,右边自适应及左边自适应,右边固定布局的几种方法

左边固定,右边自适应及左边自适应,右边固定布局的几种方法   (2014-01-27 11:02:00) 标签:  左边固定右边自适应布   右边固...

左边固定,右边自适应及左边自适应,右边固定布局的几种方法

自适应布局在现在的布局中,很容易遇见,下面是在平时工作中对左边固定,右边自适应及左边自适应,右边固定布局的几种方法的一些总结,希望能帮到大家,如果大家有更多更好的意见,欢迎补充! 页...

左边固定,右边自适应及左边自适应,右边固定布局的几种方法

页面布局如下: 一、左边固定,右边自适应的布局 1. 左边左浮动,右边加个overflow:hidden;    #lt{ float: left;width:200px...
  • msy_msy
  • msy_msy
  • 2017年06月13日 16:55
  • 82

右边固定宽度,左边自适应宽度

1、左边左浮动,margin-left负值,右边右浮动 Document *{ margin: 0; padding: 0; } .left{ float: lef...
  • zx_p24
  • zx_p24
  • 2016年11月23日 14:29
  • 163

常见工作站布局(左边定宽右边自适应)

Document * { padding: 0px;
  • cometwo
  • cometwo
  • 2016年04月14日 21:55
  • 489

div左边固定、右边自适应 和 上边固定、下边自适应

在网页设计中,我经常遇到div一边固定、一边自适应的需求,在学习了关于CSS的一些书籍和网上的一些案例后,总结了两个例子,以便应对以后的不时之需。话不多说,直接看代码。 第一个,是div左边变化,右...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:几种左边固定右边自适应的左右布局方式
举报原因:
原因补充:

(最多只允许输入30个字)