这个圣杯布局，我的想让.right元素显示到.left的左边，怎么都不成功？

Question

https://codepen.io/niusz/pen/...

使用负margin时我发现，如果我不先对.left 使用负margin让它跑到上面去，那么不管我对.right 负margin 为多少，.right 都不会上去的。这是为什么？

Answer 1

.main {
  background: red;
  float: left;
  height: 100px;
  width: 100%;
/*   margin-left: 50px ; */
  margin-right: 
 
}

因为你把main设置了width:100;所以被挤下去了，如果想让他们在一行，又要保持100%，可以在main设置

margin-left:-200px;

同时right去掉

margin-left: -510px;

Answer 2

HTML代码：

<div class="ct">
  <div class="left">left</div>
  <div class="right">right</div>
   <div class="main">main</div>
</div>

CSS代码：

.left,
.right {
  width: 100px;
  height: 100px;
}
.left {
  background: blue;
  float: left;
}
.right {
  background: green;
  float: right;
}
.main {
  background: red;
  height: 100px;
  margin: 0 100px;
}

Answer 3

因为给.main设置了width:100%，所以把后面的.left与.right都挤到下一行去了呗。
你把.main设置成width:calc(100% - 100px);和width:calc(100% - 99px);对比下吧。