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

2021-02-02 14:17

阅读：591

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

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


class="WB_frame">
...


/* css */
.WB_frame {
  width: 1000px;
  margin: 0 auto;
}

2.两列布局

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

!-- html -->
class=“wrap”>
  class=“left”>...
  
class=“main”>...

/* 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.三列布局

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


class="wrap">
  class="left">left
  class="main">main
  class="right">right    

/*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;
}

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


class="wrap">
  class="left">left
  class="right-wrap">
    class="main">main
    class="right">right      
  

/* 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移动端可以用，不需要考虑兼容）


class="wrap">
  class="left">left
  class="main">main
  class="right">right      

/*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

上一篇：滴滴2019年php高级研发工程师面试题总结

下一篇：web页面与多页应用（一）

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：web页面与多页应用（布局示例）
文章链接：http://soscw.com/index.php/essay/50009.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章