开发者社区> 前端歌谣> 正文
阿里云
为了无法计算的价值
打开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>实现两栏布局1</title>
</head>
<style>

/* 利用浮动,左边元素宽度固定 ,设置向左浮动。
将右边元素的 margin-left 设为固定宽度 。注意,因为右边元素的 width 默认为 auto ,所以会自动撑满父元素 */
  .outer {
    height: 100px;
  }

  .left {
    float: left;
    width: 200px;
    height: 100%;
    background: lightcoral;
  }

  .right {
    margin-left: 200px;
    height: 100%;
    background: lightseagreen;
  }
</style>

<body>
  <div class="outer">
    <div class="left">左侧</div>
    <div class="right">右侧</div>
  </div>
</body>

</html>

运行结果

图片.png

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

相关文章
剑指Offer——II. 青蛙跳台阶问题(JS实现)
剑指Offer——II. 青蛙跳台阶问题(JS实现)
90 0
剑指Offer——数字序列中某一位的数字(JS实现)
剑指Offer——数字序列中某一位的数字(JS实现)
79 0
剑指Offer——二维数组中的查找(JS实现)
剑指Offer——二维数组中的查找(JS实现)
76 0
剑指Offer——正则表达式匹配(JS实现)
剑指Offer——正则表达式匹配(JS实现)
65 0
剑指Offer——I. 斐波那契数列(JS实现)
剑指Offer——I. 斐波那契数列(JS实现)
71 0
剑指Offer——数值的整数次方(JS实现)
剑指Offer——数值的整数次方(JS实现)
83 0
剑指Offer——剪绳子II(JS实现)
剑指Offer——剪绳子II(JS实现)
60 0
剑指Offer——把字符串转换成整数(JS实现)
剑指Offer——把字符串转换成整数(JS实现)
101 0
剑指Offer——顺时针打印矩阵(JS实现)
剑指Offer——顺时针打印矩阵(JS实现)
189 0
+关注
前端歌谣
csdn账号前端大歌谣/前端小歌谣 微信公众号关注前端小歌谣
2486
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载