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

【问题标题】：Aligning left edges of a fluid width div and static width divs对齐流体宽度 div 和静态宽度 div 的左边缘
【发布时间】：2019-09-22 19:10:13
【问题描述】：

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

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

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

【问题讨论】：

标签： html css

【解决方案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>

【讨论】：