基础//页面布局——两栏布局2

最新推荐文章于 2022-03-03 16:57:00 发布
最新推荐文章于 2022-03-03 16:57:00 发布
阅读量188 收藏
点赞数
分类专栏： # 基础-知识点总结 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37877794/article/details/108616645
版权

文章目录

一、题目

根据题目给出你的答案。
（右栏宽度固定，左栏自适应）
题目：右宽度固定150px，左宽度自适应。

二、我的代码详情

https://codepen.io/janmie-cjm/pen/oNxMPBg

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面布局-两栏布局2</title>
  <style>
    html *{
      margin: 0;
      padding: 0
    }
    html {
      background: #ccccee
    }
    section {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <!--  右宽度固定150px，左宽度自适应  -->
  <!-- 1-float + margin （需要浮动的内容放前面） -->
  <section>
    <style>
      .left1 {
        background: #cff;
        margin-right: 150px;
      }
      .right1 {
        background: #fcc;
        float: right;
        width: 150px;
        
      }
    </style>
    <article id="wrapper1">
      <div class="right1">
        <h4>右栏</h4>
        <p>右宽度固定150px</p>
        <p>右宽度固定150px</p>
        <p>右宽度固定150px</p>
      </div>
      <div class="left1">
        <h1>1-float</h1>
        <p>左栏</p>
        <p>左宽度自适应</p>
        <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
        <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
        <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
      </div>
    </article>
  </section>

  <!-- 2-绝对定位 -->
  <section>
    <style>
      .wrapper2 {
        position: relative;
      }
      .left2 {
        background: #cff;
        position: absolute;
        left: 0;
        right: 150px;
      }
      .right2 {
        background: #fcc;
        width: 150px;
        position: absolute;
        right: 0;
      }
    </style>
    <article id="wrapper2">
      <div class="left2">
        <h1>2-绝对定位</h1>
        <p>左栏</p>
        <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
        <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
        <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
      </div>
      <div class="right2">
        <h4>右栏</h4>
        <p>右宽度固定150px</p>
        <p>右宽度固定150px</p>
        <p>右宽度固定150px</p>
      </div>
    </article>
  </section>

  <!-- 3-flexbox -->
  <section>
    <style>
      #wrapper3 {
        display: flex;
        margin-top: 300px;
      }
      .left3 {
        background: #cff;
        flex: 1;
      }
      .right3 {
        background: #fcc;
        width: 150px;

      }
    </style>
    <article id="wrapper3">
      <div class="left3">
        <h1>3-flexbox</h1>
        <p>左栏</p>
        <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
        <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
        <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
      </div>
      <div class="right3">
        <h4>右栏</h4>
        <p>右宽度固定150px</p>
        <p>右宽度固定150px</p>
        <p>右宽度固定150px</p>
      </div>
    </article>
  </section>

    <!-- 4-table -->
    <section>
      <style>
        #wrapper4 {
          display: table;
          width: 100%;
        }
        #wrapper4>div {
          display: table-cell;
        }
        .left4 {
          background: #cff;
        }
        .right4 {
          background: #fcc;
          width: 150px;
        }
      </style>
      <article id="wrapper4">
        <div class="left4">
          <h1>4-table</h1>
          <p>左栏</p>
          <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
          <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
          <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
        </div>
        <div class="right4">
          <h4>右栏</h4>
          <p>右宽度固定150px</p>
          <p>右宽度固定150px</p>
          <p>右宽度固定150px</p>
        </div>
      </article>
    </section>

    <!-- 5-grid -->
    <section>
      <style>
        #wrapper5 {
          display: grid;
          grid-template-rows: auto;
          grid-template-columns: auto 150px;
        }
        .left5 {
          background: #cff;
        }
        .right5 {
          background: #fcc;
        }
      </style>
      <article id="wrapper5">
        <div class="left5">
          <h1>5-grid</h1>
          <p>左栏</p>
          <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
          <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
          <p>左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应左宽度自适应</p>
        </div>
        <div class="right5">
          <h4>右栏</h4>
          <p>右宽度固定150px</p>
          <p>右宽度固定150px</p>
          <p>右宽度固定150px</p>
        </div>
      </article>
    </section>
</body>
</html>

三、总结

  1. 本题目的解决方案有哪些？
    float / 绝对定位 / flexbox / 表格布局 / 网格布局 ；

  2. 各方案优缺点？
    1）浮动
    优：简单
    缺：脱离文档流，需结合BFC应用
    注意：需把浮动的块级写在前面！！！
    2）绝对定位
    优：简单
    缺：脱离文档流，需结合BFC应用，代码较多
    3）flexbox
    优：简单快捷，兼容性好
    4）表格布局
    优：兼容性较好
    缺：每一列高度会同时变化；表格需先渲染，延迟页面生成速度
    注意：设置为“display：table”的块级需要设置width：100%
    5）网格布局
    优：可实现多行多列的二维复杂操作，兼容性较好，简化代码

  3. 兼容性好的方案有？
    flexbox、网格布局

*代码尚存在很多不足，望提出不同的意见，互相交流。*
爱吃松果的美美
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
网站入口页双栏对称布局实现思路
weixin_34191845的博客
05-27 267
先来一张预览图。 接下来说一说这种页面布局的实现思路，因为自己是从零开始的，所以着实花了好几天功夫才实现了这么一个看起来很简单的布局，所有东西都要自己一点点摸索，不过这种经历对于自己的成长也是很有帮助的。好了，下面进入正题。 整体布局 在写这个页面的过程中，其实不管是 HTML 代码的结构，还是 CSS 的实现方式，思路一直都是在变...
两栏、三栏布局的几种简单实现
PJW_WYB的博客
08-27 198
总结： 两栏布局（两列自适应、一列固定一列自适应）、三栏布局（两边固定中间自适应） 一、两栏布局 1、两列自适应 两列自适应是特别简单的布局方式，其要点在于把列宽用百分百来表示，然后可以使用 float 或 display：inline-block 等方法来让两列处于同一行 　　 方法一：使用 float <style> .outer{ background:green; padding-bottom:20px; } .left{ float:left;
基础//页面布局——两栏布局1
weixin_37877794的博客
09-16 194
文章目录一、题目二、我的代码详情三、总结 一、题目 根据题目给出你的答案。 （左栏宽度固定，右栏自适应） 题目：已知高度100px，左宽度固定150px，右宽度自适应。 二、我的代码详情 https://codepen.io/janmie-cjm/pen/ExKpVdO <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co.
网页布局-12种常见布局
sh0109的博客
05-15 4170
12中常见布局 固定宽度 1行1列2行2列3行1列1行2列-两栏布局2行2列3行3列-三栏 自适应宽度 1行1列2行1列3行1列1行2列 备注：页面的加载顺序是根据页面的结构，灵活控制页面的加载顺序。
常见的页面布局(两栏布局、三栏布局)
yangpengze的博客
01-10 723
理解双飞翼和圣杯布局
Zend Framework基本页面布局分析
01-21
Zend Framework 的页面布局模块——Zend_Layout——既可以跟 MVC 一起使用，也可以单独使用。本文只讨论与 MVC 一起使用的情况。 1、布局脚本 在 application/views 下创建一个 layouts 的文件夹。主布局脚本 layout...
标记语言——CSS布局
12-12
想浏览CSS教程请点这里。...在这一章内,将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 稍后在"技巧延伸"中,将会讨论Wind
Swift — UIKit 之（2）—— 布局约束|利用栈视图做一个计算器界面
01-03
本篇涉及到的页面布局及所在位置[1] 上下左右距离约束 —— 2[2] 垂直水平居中约束 —— 2[3] 子视图占父视图的比例约束 —— 4[4] 栈视图水平垂直自带约束 —— 6-3[5] 栈视图等分约束 —— 6-3[6] 栈视图间隔约束 ...
div+css 常用两栏/三种自动适应宽度分栏 兼容ie6\7\8\9 火狐 谷歌等浏览器
lap2004的专栏
08-28 2159
div+css 常用三种自动适应宽度分栏 CSS两列布局，右侧固定，左侧自适应宽度 这是右侧的内容 这是左侧的内容，自适应宽度 CSS两列布局，左侧固定，右侧自适应宽度 这是左侧的内容 固定宽度 中间内容，自适应宽度 CSS三列布局，左右宽度固定，中间自适应宽度 这是右侧的内容 固定宽度 这是左侧的内容 固定宽度 中间内容，自适应宽度 ove
页面两栏布局
热门推荐
优雅的博客
05-11 1万+
相关知识点 1.javascript变量包含两种不同数据类型的值：基本类型和引用类型。 基本类型值指的是简单的数据段，包括es6里面新增的一共是有6种，具体如下：number、string、boolean、null、undefined、symbol。 引用类型值指那些可能由多个值构成的对象，只有一种如下：object。 在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。...
返回顶部-右侧fixed+内容宽度自适应
zhuchunyan_aijia的博客
07-15 2478
来自： http://www.zhangxinxu.com/wordpress/2011/12/position-absolute-text-align-center/ 固定在右边，且内容宽度变化不影响。使用了 1. position: fixed; 固定在屏幕 2. text-align: right; 挂在右侧 3. margin-left：10px; 与内容区域有一定的距离
实现左右布局(左边定宽，右边自适应)
YoungMan_09的博客
03-03 640
实现左右布局，(左边定宽，右边自适应)
121 CSS页面布局
Pinkman2k的博客
09-18 800
一 网页布局方式 #1、什么是网页布局方式 布局可以理解为排版，我们所熟知的文本编辑类工具都有自己的排版方式，比如word，nodpad++等等 而网页的布局方式指的就是浏览器这款工具是如何对网页中的元素进行排版的 #2、网页布局/排版的三种方式 2.1、标准流 2.2、浮动流 2.3、定位流 二 标准流 标准流的排版方式，又称为：文档流/普通流，所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。 #1 浏览器默认的排版方式就是标准流排版方式 #2 在CSS中将元素分为三类：分
css布局 之 左侧宽度固定，右侧自适应两栏布局
Dark_programmer的博客
04-04 343
布局代码如下，文章统一使用布局 <body> <div class="wrapper"> <div class="left">左侧宽度固定</div> <div class="right">右侧宽度自适应</div> </div> </body> 方法一、 左侧...
精通 CSS+DIV 网页样式与布局 121
相濡以沫si
12-29 1141
href=”#”><span>一句话</span></a></li> <li>[<span><a href=”#”>长不大的小孩儿</a></span>] <a href=”#”><span>看了一个比较崇拜的 ss 师兄…</span></a></li> <li>[<span><a href=”#”>长不大的小孩儿</a></span>] <a href=”#”><span>突然想起了鲁迅
Vue//总结
weixin_37877794的博客
02-26 1322
Vue vue是什么？有什么功能？有什么优点？ 1、vue 是一个轻量级的前端框架语言。用于创建 web 交互界面的库，是一个精简的 MVVM。通过双向数据绑定把 view 层和 model 层连接了起来。 2、功能： ① 数据渲染 / 数据同步 ② 模块化 / 组件化 ③ 其它：路由、ajax、数据流 3、优点： ① 体积小，压缩后只有33k； ② 运行效率高，虚拟dom，预先通过JavaScript进行各种计算，把最终的dom操作计算出来并优化； ③ 双向数据绑定，可减少dom操作，专注于业务逻辑上；
JS//HTTP 协议
weixin_37877794的博客
02-28 1248
JS//（先占坑）2
JS//作用域和闭包
weixin_37877794的博客
02-27 541
JS——作用域和闭包 1 知识点 1.1 执行上下文 执行上下文的范围：① 一段script（全局）； ② 一个函数 在 “全局” or “函数” 范围内，以下变量会提升 全局：变量定义、函数声明 函数：变量定义、函数声明、this、arguments （PS：注意“函数声明”和“函数表达式”的区别） 1.2 this this 要在执行时才能确认值，定义时无法确认。 ———————————————— *作为构造函数执行 *作为对象属性执行 *作为普通函数执行 *call apply bind（区.
JS//JS部分实战题
weixin_37877794的博客
12-14 395
复习//JS部分实战题 文章目录复习//JS部分实战题1、写一个原型链继承的例子2、创建10个`a`标签，点击对应标签时弹出对应序号（作用域问题）3、实际开发中闭包的应用4、写一个能遍历对象和数组的通用 forEach 函数5、DOM 操作常用 API 有哪些？1.引入库1.引入库1.引入库1.引入库总结 1、写一个原型链继承的例子 <div id="root"></div>在这里插入代码片 function Elem(id) { this.elem = document.g
ColumnLayoutHelper——栏格布局
最新发布
07-27
ColumnLayoutHelper是CSDN开发的一种用于实现栏格布局的辅助工具。栏格布局是一种常见的页面布局，通过将内容分为多列来展示信息，使得页面更加整齐和易读。 ColumnLayoutHelper提供了一系列方法和属性，用于指定列数、列间距、行间距等布局相关的参数。使用该工具可以快速实现栏格布局，并且可以灵活地调整布局的样式和效果。 例如，可以通过设置列数和间距属性来控制栏格布局的样式： ``` ColumnLayoutHelper layoutHelper = new ColumnLayoutHelper(); layoutHelper.setColumnCount(2); // 设置为两列 layoutHelper.setPadding(10, 10, 10, 10); // 设置内边距 layoutHelper.setMargin(10, 10, 10, 10); // 设置外边距 layoutHelper.setAspectRatio(1.5f); // 设置列的宽高比例 ``` 然后，将需要展示的内容添加到栏格布局中： ``` ColumnLayoutHelper.ColumnLayoutView view1 = new ColumnLayoutHelper.ColumnLayoutView(); view1.setColumnSpan(1); // 设置占据的列数 view1.setLayoutView(view1); // 设置视图 ColumnLayoutHelper.ColumnLayoutView view2 = new ColumnLayoutHelper.ColumnLayoutView(); view2.setColumnSpan(1); view2.setLayoutView(view2); layoutHelper.addView(view1); layoutHelper.addView(view2); ``` 最后，将ColumnLayoutHelper应用到布局中，即可实现栏格布局的效果： ``` VirtualLayoutManager layoutManager = new VirtualLayoutManager(context); RecyclerView recyclerView = new RecyclerView(context); recyclerView.setLayoutManager(layoutManager); DelegateAdapter delegateAdapter = new DelegateAdapter(layoutManager); delegateAdapter.addAdapter(new SingleLayoutAdapter(context, layoutHelper)); recyclerView.setAdapter(delegateAdapter); ``` 通过使用ColumnLayoutHelper，开发者可以方便地实现栏格布局，提升页面的展示效果和用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值