css - 双飞翼布局为什么不直接用padding+box-sizing

问题描述

问 题

在网上查看双飞翼布局的介绍，都是在主内容中再嵌套一个div，然后用margin，我想问的是为什么不直接用padding+box-sizing这样可以省去一个div，两种方法的代码如下：
1、嵌套+margin

<div class="content">
  <div class="main">
    <div class="inner">我是主要的</div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<style>
.content {
  width: 100%;
}
.main {
  width: 100%;
  background-color: #fff;
}
.main,.left,.right {
  float: left;
}
.left {
  width:20%;
  margin-left:-100%;
  background-color: pink;
}
.right {
  width:30%;
  margin-left:-30%;
  background-color: pink;
}
.inner {
  margin: 0 30% 0 20%;
}
</style>

2、padding+box-sizing

<div class="content">
  <div class="main">
    我是主要的
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<style>
.content {
  width: 100%;
}
.main {
  width: 100%;
  background-color: #fff;
  padding: 0 30% 0 20%;
  box-sizing: border-box;
}
.main,.left,.right {
  float: left;
}
.left {
  width:20%;
  margin-left:-100%;
  background-color: pink;
}
.right {
  width:30%;
  margin-left:-30%;
  background-color: pink;
}
</style>

解决方案

首先这个东西出的比较早，可能考虑兼容性问题吧。
还有main加背景色的问题，padding部分会有背景色，有些效果比较麻烦。

这篇关于css - 双飞翼布局为什么不直接用padding+box-sizing的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！