#yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式

简介: #yyds干货盘点# 【js学习笔记四十八】实现两栏布局的第四种方式

前言


我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷


导语


实现两栏布局第四种方式

图片.png

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>两栏布局第四种</title>
  <style>
    .outer {
      position: relative;
      height: 100px;
    }
    .left {
      width: 200px;
      height: 100%;
      background: lightcoral;
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
  <!-- 利用绝对定位,父级元素设为相对定位。左边元素宽度固定,右边元素 absolute  定位, left  为宽度大小,其余方向定位为 0  -->
</body>
</html>

运行结果

图片.png

相关文章
|
3月前
|
Web App开发 前端开发 JavaScript
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
技术心得记录:瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)
29 0
|
19天前
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
24 0
|
2月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的云的学习笔记系统附带文章源码部署视频讲解等
29 0
|
3月前
|
JavaScript 容器
JS实现瀑布流布局
JS实现瀑布流布局
|
4月前
|
移动开发 JavaScript 前端开发
webgl学习笔记3_javascript的HTML DOM
webgl学习笔记3_javascript的HTML DOM
47 0
webgl学习笔记3_javascript的HTML DOM
|
4月前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
35 0
|
4月前
|
前端开发 JavaScript 开发者
编程笔记 html5&css&js 014 网页布局框架
编程笔记 html5&css&js 014 网页布局框架
|
4月前
|
前端开发 开发者
编程笔记 html5&css&js 013 HTML布局
编程笔记 html5&css&js 013 HTML布局
|
4月前
|
前端开发 JavaScript API
JavaScript学习笔记(一)promise与async
JavaScript学习笔记(一)promise与async
|
4月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
56 0