打开AdminJS成长之路!这个是我参加「AdminJS日新的目标 · 12 月更文考验」第19天,查看更多活动规则

合理布局特性:

具体内容区分为前后左右三部分,在其中左右两个一部分的宽度固定不动,中间部分的宽度随视口转变

优点和缺点

  • 圣杯合理布局用精准定位 偏移,编码较复杂,可是dom构造清楚
  • 双飞翼布局,不能使用精准定位,换得dom构造却不友善

圣杯:

  • 好几个div标识
  • 正中间总宽center设为100%,外边的content设定padding,给两边空出部位,留的总宽恰好为上下固定不动的宽度;
  • center,left,right设定波动,floor设定clear:both清除浮动;
  • left设定margin-left:-100%,这时left坐落于center里的左边,;再设置定位position:relative;left:-100px
  • right设定margin-right:-100px
<body>
<div class="top">top</div>
<div class="content">
<div class="center float">center</div>
<div class="left float">left</div>
<div class="right float">right</div>
</div>
<div class="floor">floor</div>
</body>
.body{margin:0;padding:0}

.float{float:left}

.top{background:#ff2}

.floor{background:#1121d1;clear:both}

.top,.floor{height:50px;width:100%}

.content{padding:0 100px}

.center{width:100%;background:rgb(129,55,55)}

.left{position:relative;background:rgb(1,55,55);width:100px;margin-left:calc(-100%);right:100px}

.right{background:rgb(1,155,155);width:100px;margin-right:-100px}

燕双飞

  • 好几个div标识;
  • container设定width:100%,center设定width100%;margin:0 100px;
  • container,left,right设定波动,footer清除浮动
  • left设定margin-left:100%
  • right设定margin-left:-100px
<body>
<div class="header">header</div>
<div class="container float">
<div class="center">center</div>
</div>
<div class="left float">left </div>
<div class="right float">column</div>
<div class="footer">footer</div>
</body>
.header{height:50px;background:#ff9;width:100%}

.footer{height:50px;background:rgb(24,24,1);clear:both;width:100%}

.left{width:100px;background:rgb(60,51,189);margin-left:-100%}

.right{width:100px;background:rgb(23,160,160);margin-left:-100px}

.footer{height:50px;background:rgb(24,24,1);clear:both;width:100%}

.float{float:left;height:50px}

.container{width:100%}

.center{height:100%;margin-left:100px;margin-right:100px;background-color:pink}

flex完成

  • flex-grow 用以设定工程项目的放大系数。
  • flex-shrink 用以设定工程项目的变小指数。
  • flex-basis 用以设定项目在主轴轴承里的室内空间。
  • flex: flex-grow flex-shrink flex-basis | auto | none。 auto 表明:1 1 auto,即等占比扩张或是缩小。 none 表明:0 0 auto,且不扩张,都不缩小。
  • order: 为整数金额,能够为负值,order 初始值为 0, 用以是设定工程项目的排列次序,从小到大排列

  • content设定display:flex
  • center设定flex:1
  • left设定flex: 0 0 100px,order:-1
  • right设定flex: 0 0 100px
   <div class="content">
<div class="center">center</div>
<div class="left column">left100 </div>
<div class="right column">column150</div>
</div>
   .content {
display: flex;
}

.center {
flex: 1;
background: #ddd;
}

.left {
flex: 0 0 100px;
order: -1;
background: #dd0;
}

.right {
flex: 0 0 100px;
background: #1d0;
}

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:AdminJS成长之路!