江苏龙网

  1. 主页 > 生活百科 > >

超详细常用css布局( 三 )

css

极其灵活(还有其他实现方式)，需要注意浏览器兼容性
 
table-cell布局实现步骤
  1. 给三栏都设置为表格单元 display: table-cell
  2. left 和 right分别设置 width: 100px和width: 200px，container设置 width: 100%
  3. 这时 left 和 right 被挤到两边去了，因此要分别设置min-width确保不会被挤压 。
<style>.container {width: 100%;display: table;}.container > div {display: table-cell;height: 300px;}.content {height: 100%;margin: 0 20px;background: #f8cf5f;}.left {width: 100px;min-width: 100px;background-color: #ce5a4b;}.right {width: 200px;min-width: 200px;background-color: #499e56;}</style><body><div class="left"></div><!-- 这时的main要放在中间 --><div class="main"><div class="content"></div></div><div class="right"></div></body>复制代码
这种布局方式能使得三栏的高度是统一的，但不能使main放在最前面得到最先渲染
 
网格布局实现步骤
  1. 给 container 设置为display: grid
  2. 设置三栏的高度：grid-template-rows: 300px
  3. 设置三栏的宽度，中间自适应，两边固定：grid-template-columns: 100px auto 200px;
<style>.container {display: grid;width: 100%;grid-template-rows: 300px;grid-template-columns: 100px auto 200px;}.left {background-color: #ce5a4b;margin-right: 20px;}.main {background-color: #f8cf5f;}.right {background-color: #499e56;margin-left: 20px;}</style><body><div class="container"><div class="left"></div><div class="main"></div><div class="right"></div></div></body>复制代码
使用起来极其方便,代码简介,但是兼容性很差
 
四、多列等高 
利用背景图片<style>.container {background: url("column.png") repeat-y;width: 960px;margin: 0 auto;}.left {float: left;width: 220px;}.main {float: left;width: 480px;}.right {float: left;width: 220px;}</style><body><div class="container"><div class="left"></div><div class="main"></div><div class="right"></div></div></body>复制代码 
使用正padding和负margin对冲实现多列布局方法实现步骤：
  1. background 会填充内边距 padding，而不会填充外边距 margin。margin具有坍塌性，可以设置负值 。
  2. float:left 。使用float，元素会脱离文档流，使其浮动至最近的文档流元素 。在这里的作用是，将三个div元素并排 。
  3. overflow:hidden; 设置overflow属性为hidden，这样会让父容器产生BFC（Block Fromatting Context块级格式化上下文）效果，消除float带来的影响 。同时，根据需要，会截取内容以适应填充框，将超出容器的部分隐藏 。
<style>.container {overflow: hidden;}.container>div {/*** padding-bottom 设置比较大的正值 。* margin-bottom 设置绝对值大的负值 。**/padding-bottom: 10000px;margin-bottom: -10000px;float: left;width: 30%;}.left {background-color: #ce5a4b;}.main {background-color: #f8cf5f;}.right {background-color: #499e56;}</style><body><div class="container"><div class="left"></div><div class="main"></div><div class="right"></div></div></body>复制代码 
布局 flex实现等高实现思路：
  1. 父元素设置display:flex, 弹性盒子布局flex，默认值就是自带等高布局的特点
<style>.container {display: flex;}.left {width: 200px;background-color: #ce5a4b;}.main {flex: 1;height: 400px;background: #f8cf5f;}.right {width: 300px;background: #499e56;}</style><body><div class="container"><div class="left"></div><div class="main"></div><div class="right"></div></div></body>复制代码 
table-cell等高布局实现步骤：
1.父元素设置dispaly:table, table布局天然就具有等高的特性 。
<style>.container {display: table;}.left {display: table-cell;width: 300px;background-color: #ce5a4b;}.main {display: table-cell;width: 300px;height: 400px;background: #f8cf5f;}.right {display: table-cell;width: 300px;background: #499e56;}</style><body><div class="container"><div class="left"></div><div class="main"></div><div class="right"></div></div></body>复制代码


推荐阅读


上一篇：广西昭平,茶农赶采白露茶

下一篇：永春县佛手茶品牌形象大使选拔赛报名启动