web页面与多页应用（布局之浮动）

2021-01-22 17:14

阅读：501

标签：问题 idt 填充 add 外边距 containe nbsp column 偏移量

1.使用浮动来设置二列布局
利用浮动和块级元素实现的左侧宽度固定，右侧自适应宽度的布局方式

left
right
/* css */
.left {
  float: left;
  width: 100px;
  background-color: red;
}
.right {
  margin-left: 100px;
  background-color: green;
}

2.使用浮动

著名的有“圣杯布局”和“双飞翼布局”，他们都是左侧，右侧宽度固定。中间自适应的三列布局。

圣杯布局：“圣杯布局”中每列都用了浮动，不同的是元素顺序并没有与布局顺序一致（先写中间列而不是左边列），同时左侧元素还借助了标准文档流的相对定位。元素顺序与我们直觉不一致的目的在于让浏览器优先解析和显示中间部分内容，但带来的问题就是左侧元素的偏移值无法很好的计算

　　　　左侧元素距离左边的偏移量 = 左侧元素宽度 + 中间元素宽度

　　左侧元素宽度是固定的，这里是200px，中间元素是撑满父容器内容区域的，是相对值100%，所以无法使用单纯地做外边距来实现，需要应用兼容性更好的解决方案——相对定位



  center
  left
  right

/*css*/
.container .column {
  float: left;
  position: relative;
}
.container {
  padding-left: 200px;
  padding-right: 150px;
}
.left {
  width: 200px;     
  margin-left: -100%;  
  right: 200px; 
  background-color: red;
}
.center {
  width: 100%;
  background-color: yellow;
}
.right {
  width: 150px; 
  margin-right: -150px; 
  background-color: green;
}

　　“双飞翼布局”就是针对以上问题提出的，该布局不使用相对定位的方式来使左边的元素进行偏移，而是在中间的元素上加了一层父容器，并留出相应的边距让左右两边元素能顺利填充进来



  
    center
  
  left
  right

/*css*/
.container {
  position: relative;
}
.column {
  float: left;
}
.center-wrap {
  width: 100%;
}
.center-wrap .center {
  margin-left: 200px;
  margin-right: 150px;
  background-color: yellow;
}
.left {
  width: 200px;
  margin-left: -100%;
  background-color: red;
}
.right {
  width: 150px;
  margin-left: -150px;
  background-color: green;
}

web页面与多页应用（布局之浮动）

标签：问题 idt 填充 add 外边距 containe nbsp column 偏移量

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

上一篇：jsp c标签使用踩坑

下一篇：js+php表格的增删改差

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

亲，登录后才可以留言！

web页面与多页应用（布局之浮动）

评论

热门文章

推荐文章

最新文章

置顶文章