/html-css-layout-Left-And-Right

厚积薄发 前端学习笔记 CSS基础篇-经典的左右布局方法总结（左边固定，右边自适应或右边固定，左边自适应）

Primary LanguageJavaScriptMIT LicenseMIT

html-css-layout-Left-And-Right

CSS基础实践指导系列

CSS经典左右布局（左边固定，右边自适应或右边固定，左边自适应方法总结归纳）

  • 方法一：左侧div浮动 右侧元素设置margin-left自适应
  • 方法二：左侧div浮动，右侧元素创建BFC
  • 方法三：左侧div采用绝对布局，右侧元素设置margin-left自适应
  • 方法四：外层父级元素使用table布局，子元素使用table-cell
  • 方法五：双float + calc计算宽度
  • 方法六：flex布局

usage:

  1. git clone xxxx
  2. cd xxx
  3. npm i or yarn add

run in dev:

npm start or yarn start

build:

npm run build

说明

框架基于CRA2.x搭建，纯粹是笔者图方便，看不懂react框架相关代码的同学，可以直接看文章链接

文章链接

简书链接 掘金链接