码迷,mamicode.com
首页 > Web开发 > 详细

web页面与多页应用(布局示例)

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

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

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)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!