调整div在主体的左侧和另一个具有自动边距的div之间

Question

我希望我的ad div恰好位于正文的左侧和middle div之间。我怎么做到这一点？

body {
border: 1px solid black;	
}
#middle {
border: 1px solid black;			
margin: auto;		
width: 50px;
height: 100px;	
}	
#ad {
border: 1px solid black;
float: left;				
width: 50px;
height: 100px;	
}

<div id = "ad"> ad </div>
<div id = "middle"> middle </div>

Answer 1

您可以使用flexbox实现此布局，将auto margins与不可见的弹性项目结合起来。

<强> HTML

<div class="box ad"> ad </div>
<div class="box middle"> middle </div>
<div class="box invisible"> right </div><!-- invisible -->

<强> CSS

body {
  display: flex;
  border: 1px solid black;
}

.box {
  width: 50px;
  height: 100px;
  border: 1px solid black;
}

.invisible { margin-left: auto; margin-right: auto; visibility: hidden;  }
.middle    { margin-left: auto; }
.ad        { margin-left: auto; }

DEMO

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。