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

2022-10-05 20:55:10

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页面与多页应用（布局示例）

码农公寓

相关文章