两栏布局之右定宽左自适应，上定高下自适应，下定高上自适应

最新推荐文章于 2022-09-19 11:30:22 发布
最新推荐文章于 2022-09-19 11:30:22 发布
阅读量285 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41993503/article/details/107770557
版权

这三种布局其实都是大同小异，今天就全部总结成一篇文章。

1.右定宽左自适应

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    .layout article > div{
      min-height: 100px;
    }
  </style>
</head>
<body>
  <!-- float -->
  <section class="layout float">
    <style>
      .layout.float .left{
        margin-right: 200px;
        background-color:red;
      }
      .layout.float .right{
        float: right;
        width: 200px;
        background-color: green;
      }
    </style>
    <article>
      <div class="right"></div>
      <div class="left"></div>
    </article>
  </section>

  <!-- position -->
  <section class="layout position">
    <style>
      .layout.position{
        margin-top: 10px;
      }
      .layout.position .left{
        margin-right: 200px;
        background-color:red;
      }
      .layout.position .right{
        position: absolute;
        right: 0;
        background-color: green;
        width: 200px;
      }
    </style>
    <article>
      <div class="right"></div>
      <div class="left"></div>
    </article>
  </section>

  <!-- flex -->
  <section class="layout flex">
    <style>
      .layout.flex{
        margin-top: 10px;
      }
      .layout.flex article{
        display: flex;
      }
      .layout.flex .left{
        flex: 1;
        background-color:red;
      }
      .layout.flex .right{
        background-color: green;
        width: 200px;
      }
    </style>
    <article>
      <div class="left"></div>
      <div class="right"></div>
    </article>
  </section>

  <!-- grid -->
  <section class="layout grid">
    <style>
      .layout.grid{
        margin-top: 10px;
      }
      .layout.grid article{
        display: grid;
        grid-template-columns: auto 200px;
      }
      .layout.grid .left{
        background-color:red;
      }
      .layout.grid .right{
        background-color: green;
      }
    </style>
    <article>
      <div class="left"></div>
      <div class="right"></div>
    </article>
  </section>

  <!-- table -->
  <section class="layout table">
    <style>
      .layout.table{
        margin-top: 10px;
      }
      .layout.table article{
        display: table;
        height: 100px;
        width: 100%;
      }
      .layout.table .left{
        display: table-cell;
        background-color:red;
      }
      .layout.table .right{
        display: table-cell;
        background-color: green;
        width: 200px;
      }
    </style>
    <article>
      <div class="left"></div>
      <div class="right"></div>
    </article>
  </section>
</body>
</html>

2.上定高下自适应

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    html, body{
      height: 100%;
    }
    .layout{
      height: 100%;
    }
    .layout article > div{
      min-width: 100px;
    }
  </style>
</head>
<body>
  <!-- flex -->
  <section class="layout flex">
    <style>
      .layout.flex article{
        height: 100%;
        width: 100px;
        display: flex;
        flex-direction: column;
      }
      .layout.flex .top{
        height: 100px;
        background-color: red;
      }
      .layout.flex .bottom{
        flex: 1;
        background-color: green;
      }
    </style>
    <article>
      <div class="top"></div>
      <div class="bottom"></div>
    </article>
  </section>

  <!-- absolute -->
  <section class="layout absolute">
    <style>
      .layout.absolute{
        margin-left: 200px;
      }
      .layout.absolute article{
        height: 100%;
        width: 100px;
      }
      .layout.absolute .top{
        height: 100px;
        background-color: red;
        position: absolute;
        top: 0;
      }
      .layout.absolute .bottom{
        background-color: green;
        position: absolute;
        bottom: 0;
        top: 100px;
      }
    </style>
    <article>
      <div class="top"></div>
      <div class="bottom"></div>
    </article>
  </section>

  <!-- grid -->
  <section class="layout grid">
    <style>
      .layout.grid{
        margin-left: 200px;
      }
      .layout.grid article{
        height: 100%;
        width: 100px;
        display: grid;
        grid-template-rows: 100px auto;
      }
      .layout.grid .top{
        height: 100px;
        background-color: red;
      }
      .layout.grid .bottom{
        background-color: green;
      }
    </style>
    <article>
      <div class="top"></div>
      <div class="bottom"></div>
    </article>
  </section>

    <!-- table -->
    <section class="layout table">
      <style>
        .layout.table{
          margin-left: 200px;
        }
        .layout.table article{
          height: 100%;
          width: 100px;
          display: table;
        }
        .layout.table .top{
          height: 100px;
          background-color: red;
          display: table-row;
        }
        .layout.table .bottom{
          display: table-row;
          background-color: green;
        }
      </style>
      <article>
        <div class="top">1</div>
        <div class="bottom">2</div>
      </article>
    </section>
</body>
</html>

3.下定高上自适应

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    html, body{
      height: 100%;
    }
    .layout{
      height: 100%;
    }
    .layout article > div{
      min-width: 100px;
    }
  </style>
</head>
<body>
  <!-- flex -->
  <section class="layout flex">
    <style>
      .layout.flex article{
        height: 100%;
        width: 100px;
        display: flex;
        flex-direction: column;
      }
      .layout.flex .top{
        flex: 1;
        background-color: red;
      }
      .layout.flex .bottom{
        height: 100px;
        background-color: green;
      }
    </style>
    <article>
      <div class="top"></div>
      <div class="bottom"></div>
    </article>
  </section>

  <!-- absolute -->
  <section class="layout absolute">
    <style>
      .layout.absolute{
        margin-left: 200px;
      }
      .layout.absolute article{
        height: 100%;
        width: 100px;
      }
      .layout.absolute .top{
        background-color: red;
        position: absolute;
        top: 0;
        bottom: 100px;
      }
      .layout.absolute .bottom{
        background-color: green;
        height: 100px;
        position: absolute;
        bottom: 0;
      }
    </style>
    <article>
      <div class="top"></div>
      <div class="bottom"></div>
    </article>
  </section>

  <!-- grid -->
  <section class="layout grid">
    <style>
      .layout.grid{
        margin-left: 200px;
      }
      .layout.grid article{
        height: 100%;
        width: 100px;
        display: grid;
        grid-template-rows: auto 100px;
      }
      .layout.grid .top{
        background-color: red;
      }
      .layout.grid .bottom{
        height: 100px;
        background-color: green;
      }
    </style>
    <article>
      <div class="top"></div>
      <div class="bottom"></div>
    </article>
  </section>

    <!-- table -->
    <section class="layout table">
      <style>
        .layout.table{
          margin-left: 200px;
        }
        .layout.table article{
          height: 100%;
          width: 100px;
          display: table;
        }
        .layout.table .top{
          background-color: red;
          display: table-row;
        }
        .layout.table .bottom{
          height: 100px;
          display: table-row;
          background-color: green;
        }
      </style>
      <article>
        <div class="top">1</div>
        <div class="bottom">2</div>
      </article>
    </section>
</body>
</html>

远方_ry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
上下定高 中间自适应_前端知识点之三栏布局 左右宽度固定 上下高度固定 中间自适应 几种解决办法...
weixin_39725594的博客
12-30 597
“题目：假设高度已知，请写出三栏布局，其中左、右栏的宽度为 300px，中间自适应”面试经常会遇到这样的一道题来考察对页面布局的基本功，相信大部分人都会想到通过 float 和绝对定位这两种方法来实现，但是想要在面试官面前得到更多的认可，还需要列举出更多的解决办法和优缺点：三栏布局 左右宽度固定 中间自适应 五种解决办法以下五种解决办法的公共样式/* 偷懒样式重置 */html * { margi...
三种方法实现两栏等高自适应布局（《CSS世界读书笔记》）
Aimee_ice的博客
05-21 2464
前言 本文为张鑫旭《CSS世界》读书笔记，代码实现思路亦来源此书。 效果需求： 实现两栏布局，要求无论哪一栏的内容多，两栏高度均以最高一栏为准，两栏的背景色需和容器高度相等，即竖直方向铺满容器。 【TIPS】这里为什么不用height: 100%呢？原因在于必须给父元素设定具体高度值，此属性值才会起作用，但大部分情况下，我们是不太会给父元素的高度定死的。 代码实现： 方法一：使用 di...
成长之路
wo1102715497的博客
11-19 85
自适应布局是通过在视图之间添加约束条件来确定视图在屏幕中的位置。因为我们是在二维平面中确定视图的位置，因此我们至少要在视图的水平和垂直两个方向添加约束，这样才能确定视图的位置。 首先我们应该新建一个项目 然后我们把Android studio帮我们默认创建的activity_main.xml删除掉，然后新建一个同名的xml，将xml的根视图设置为androidx.constraintlayout.widget.ConstraintLayout。 然后双击activity_main.xml选择右上角的Desi
上下定高 中间自适应_css布局上下高度固定中间自适应，且内容超出高度时出现滚轴...
weixin_42172204的博客
02-11 329
本篇文章记得一下css 布局上下固定高度 中间自适应高度 且内容 超出高度时出现滚轴这里用的flex布局的方案实现布局css flex 上下固定中间自适应例子body {padding: 0;margin: 0;}#boxs {width: 90%;height: 300px;border: 1px solid #333;display: flex;flex-direction: colum...
html五栏布局下自定义宽度,阿里巴巴跨境考试题双栏布局下自定义宽度
weixin_39841572的博客
06-20 1000
阿里巴巴跨境考试题双栏布局下自定义宽度双栏布局下自定义宽度是多少双栏布局下自定义宽度是多少  我来答 分享 微信扫一扫 新浪微博 QQ空间 举报 浏览2 次 可选中1个或多个下面的关键词,搜索相关资料。首先打开Word文档，需要在其中设置三栏布局，点击“布局”选项卡中的“栏”选项。在打开的选项菜单中点击“更多栏”，无需点击“三栏”。然后在打开的分栏设置窗口中点击“三栏”并取消“栏宽相等”的勾选，...
实现一个两栏布局，左边固定宽度，右边自适应？
weixin_42220039的博客
10-13 664
1、利用 calc 计算宽度的方法 css代码如下： .box{overflow: hidden;height: 100px;margin: 10px 0;} .box&gt;div{height: 100%;} #box1&gt;div{float: left;} .left1{width: 100px;background: yellow;} .right1{background: #09c;...
左定宽度右自适应宽度并且等高布局实现代码
09-25
左侧固定宽，右侧自适应屏幕宽;左右两列，等高布局;左右两列要求有最小高度，例如：200px;（当内容超出200时，会自动以等高的方式增高）要求不用JS或CSS行为实现,那么下面我们就先来看看如何实现
CSS左右两列自适应高布局示例代码
09-25
左右两列自适应高的需求是越来越紧迫了，实现方法也是各种各样，下面有个不错的示例可以实现此效果，感兴趣的朋友可以参考下，希望对大家有所帮助
左右两列自适应中间列内容即随中间内容高度自适应的布局
09-25
两边内容可能随中间内容高度自适应，中间内容也可以随两边内容高度的增加而自适应，经过测试在主流浏览器中显示一致，下面将经验与大家分享
flex布局实现左侧文字溢出省略右侧文字自适应
09-22
主要介绍了flex布局实现左侧文字溢出省略右侧文字自适应的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一侧固定一侧自适应自适应效果拓展
love_czz的博客
03-01 180
弹性布局下实现自适应效果 我们在写网页时或多或少会遇到这样的需求： 上方固定下方自适应（或下方固定上方自适应） 上下固定中间自适应 左边固定或右边自适应（或右边固定左边自适应） 左边固定右边自适应，自适应那侧上方自适应下边固定。 今天教大家如何实现以上几点的整体排版(display:flex;)： 1. 上下的固定和自适应 ①：给父容器加 flex-direction: column ；改变主...
自定义宽高比例的布局控件
ProgramChangesWorld的专栏
11-22 2560
前言  在写AndroidUI界面的时候，一直比较让我头疼的是GridView控件。因为在写列表的时候，我希望比如说能有3列的内容，并且这三列是平分了屏幕宽度，宽度是平分了，但是高度该怎么办？高度能用match_parent吗，好像不太好吧，那wrap_content那不行，那就用一个具体的值吧–100dp,这就更不行了！！高度设置死了，但是宽度是没有设置死，这样的话出来的界面特别难看，所以我就希望
页面布局--三栏布局，高度已知，两边宽度固定，中间自适应实现方式
xuexizhe88的博客
08-03 1224
题目：假设高度已知，三栏布局，其中左栏和右栏宽度为200px，中间自适应 全局样式 html *{ padding: 0; margin: 0; } .layout{ margin-top: 20px; } .layout article div{ min-height: 100px; } 1、浮动布局 ...
Vue 自适应高度表格的实现方法
江湖行骗老中医
08-20 3934
这篇文章主要介绍了Vue 自适应高度表格的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧 前言 示例版本为 Element-ui 2.13.1 + Vue 2.6.11 在使用过程中表格是必不可少的一个控件，用于展示数据，单页数据量过多就会导致浏览器自动生成右侧滚动条。 如果页面有头部信息或查询按钮，移动滚动条后会遮挡住这些操作和信息内容。 Element-UI 中的 el-table 提供了设置高...
vue div自适应高度
莫逸雪的博客
06-07 7173
div高度自适应利用flex布局或者监听其他盒子高度
html自适应布局_三分钟学会响应式布局和自适应布局
weixin_40008033的博客
12-01 3581
响应式布局和自适应布局详解响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说难，这也算是响应式布局美的所在。在考虑到表层级别不确定因素的过程中...
vue 网格布局_Vue.js的可拖动和可调整大小的网格布局
cuk5239的博客
07-25 2766
vue 网格布局 Vue网格布局 (vue-grid-layout) vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired in React-Grid-Layout vue-grid-layout是Vue.js的网格布局系统，例如Gridster。 在React-Grid-Layo...
vue项目网页自适应，等比例放大缩小
热门推荐
zxczero的博客
09-19 3万+
vue项目网页自适应，等比例放大缩小
flex布局 右边固定 左边自适应
最新发布
07-20
要实现右边固定、左边自适应的布局，您可以使用 Flexbox 来实现。以下是一个简单的示例代码： ```html <!DOCTYPE html> .container { display: flex; } .left { flex-grow: 1; background-color: light...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值