对齐流体宽度div的左边缘和静态宽度div

Question

是否可以对齐静态宽度div的左边缘和流体的左边缘，如下图所示？

所有div的左边缘应该在所有分辨率上对齐，并且＆＃34; div b＆＃34;应该占据右边的所有空间。

div http://i61.tinypic.com/21nh62u.png

编辑： Roko C. Buljan的答案解决了这个难题。对于没有calc或vw单元支持的浏览器，我相信Modernizr和pollyfills将会来拯救。

Answer 1

可以使用calc()和vw单位（ ViewportWidth ）进行一些计算

使用500px公共容器：jsBin demo

body{
  margin:0;
  background:#ECD06B;
  color:#fff;
}
#container{
  width:500px;
  margin:0 auto;
}
.static, .fluidtoright{
  padding:50px 0;
  margin: 15px 0;
}
.static{
  background:#E9561C;
}
.fluidtoright{
  background:#5981E4;
  width: calc((100vw / 2) + 250px); /* 250 is half the 500 width */
  text-align:right;
}

  <div id="container">

    <div class="static"></div>
    <div class="fluidtoright">text aligned right just to test</div>
    <div class="static"></div>

  </div>

不使用500px容器：jsBin demo

body{
  margin:0;
  background:#ECD06B;
  color:#fff;
}
.static, .fluidtoright{
  padding:50px 0;

}
.static{
  margin: 15px auto;
  width:500px;
  background:#E9561C;
}
.fluidtoright{
  background:#5981E4;
  margin-left: calc((100vw / 2) - 250px);
  text-align:right;
}

    <div class="static"></div>
    <div class="fluidtoright">textaligned right to test</div>
    <div class="static"></div>