开发者社区> 前端歌谣> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

#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>

</head>
<style>
  .outer {
  position: relative;
  height: 100px;
}
.left {
  position: absolute;
  width: 200px;
  height: 100%;
  background: lightcoral;
}
.right {
  margin-left: 200px;
  height: 100%;
  background: lightseagreen;
}

</style>
<body>
<!-- 利用绝对定位,父级元素设为相对定位。左边元素 absolute  定位,宽度固定。右边元素的 margin-left  的值设为左边元素的宽度值。 -->
  
  <div class="outer">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
</body>
</html>

运行结果

图片.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
剑指Offer——正则表达式匹配(JS实现)
剑指Offer——正则表达式匹配(JS实现)
68 0
剑指Offer——I. 斐波那契数列(JS实现)
剑指Offer——I. 斐波那契数列(JS实现)
74 0
剑指Offer——数值的整数次方(JS实现)
剑指Offer——数值的整数次方(JS实现)
83 0
剑指Offer——剪绳子II(JS实现)
剑指Offer——剪绳子II(JS实现)
63 0
剑指Offer——把字符串转换成整数(JS实现)
剑指Offer——把字符串转换成整数(JS实现)
101 0
剑指Offer——表示数值的字符串(JS实现)
剑指Offer——表示数值的字符串(JS实现)
50 0
剑指Offer——打印从1到最大的n位数(JS实现)
剑指Offer——打印从1到最大的n位数(JS实现)
57 0
HOT100——两数相加(JS实现)
HOT100——两数相加(JS实现)
58 0
HOT100——无重复字符的最长子串(JS实现)
HOT100——无重复字符的最长子串(JS实现)
62 0
+关注
前端歌谣
csdn账号前端大歌谣/前端小歌谣 微信公众号关注前端小歌谣
2486
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载