web页面与多页应用（布局示例）

时间：2020-06-20 22:08:32 阅读：92 评论：0 收藏：0 [点我收藏+]

1.单列布局（类似微博）

<!-- html -->
<div class="WB_frame">
...
</div>
/* css */
.WB_frame {
  width: 1000px;
  margin: 0 auto;
}

2.两列布局

一则固定，另一侧填充剩余宽度

!-- html -->
<div class=“wrap”>
  <div class=“left”>...</div>
  </div class=“main”>...</div>
</div>
/* css */
.wrap {
  font-size: 0;
  padding-left: 100px;
}
.left {
  display: inline-block;
  font-size: 12px;
  width: 100px;
  margin-left: -100px;
  vertical-align: top;
}
.main {
  display: inline-block;
  font-size: 14px;
  vertical-align: top;
}

3.三列布局

三列布局一般是左右两边固定宽度，中间宽度自适应。实现思路基本与上面一致，父元素设置内边距的同时两边元素设置负的外边距，中间元素宽度撑满

<!-- html -->
<div class="wrap">
  <div class="left">left</div>
  <div class="main">main</div>
  <div class="right">right</div>    
</div>
/*css*/
.left {
  background: red;
  width: 100px;
  margin-left: -100px;
}
.right {
  background: green;
  width: 200px;
  margin-right: -200px;
}
.main {
  background: blue;
  width: 100%;
}
.left,.right,.main {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
}
.wrap {
  font-size: 0;
  padding-left: 100px;
  padding-right: 200px;
}

当然还有另一种思路，就是把三列布局拆分成两个两列布局。利用这种拆分的思路，更多列的布局都可以被拆分成两列布局和三列布局。

<!-- html -->
<div class="wrap">
  <div class="left">left</div>
  <div class="right-wrap">
    <div class="main">main</div>
    <div class="right">right</div>      
  </div>
</div>
/* css */
.left {
  background: red;
  width: 100px;
  margin-left: -100px;
}
.right {
  background: green;
  width: 200px;
  margin-right: -200px;
}
.main {
  background: blue;
  width: 100%;
}
.left,.right,.main {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
}
.wrap {
  font-size: 0;
  padding-left: 100px;
  box-sizing: border-box;
}
.right-wrap {
  font-size: 0;
  display: inline-block;
  padding-right: 200px;
  width: 100%;
  box-sizing: border-box;
}

还有更简单的，使用CSS的calc函数动态计算剩余宽度，在不考虑兼容性的情况下代码量会少很多，因为不需要设置边距，只需将中间部分的宽度设为自适应即可（个人觉得calc移动端可以用，不需要考虑兼容）

<!-- html -->
<div class="wrap">
  <div class="left">left</div>
  <div class="main">main</div>
  <div class="right">right</div>      
</div>
/*css*/
.left {
  background: red;
  width: 100px;
}
.right {
  background: green;
  width: 200px;
}
.main {
  background: blue;
  width: calc(100% - 100px - 200px);
}
.left,.right,.main {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
}
.wrap {
  font-size: 0;
}

web页面与多页应用（布局示例）

标签：block 代码 main font 计算情况移动实现 code

原文地址：https://www.cnblogs.com/chorkiu/p/13170155.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行