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

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

所有div的左边缘应在所有分辨率上对齐，“ div b”应占据右侧的所有空间。




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

最佳答案

使用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>