将 div 并排堆叠到容器的右侧（另一个 div 锚定在左侧）答案

【问题标题】：Stacking divs side by side to the right of a container (with another div anchored left)将 div 并排堆叠到容器的右侧（另一个 div 锚定在左侧）
【发布时间】：2016-06-08 01:33:33
【问题描述】：

这就是我想要实现的（蒙太奇图片）：

红色轮廓是容器，其大小是相对于页面/浏览器窗口计算的。然后，我想要两个 div（绿色虚线），宽度为容器的 15%（高度为 100%），贴在容器的右侧，占用所需的空间 - 最后，我'想要一个左对齐的 div（蓝色虚线），高度为容器的 100%，以占用剩余宽度的其余部分。

不幸的是，我最接近的是：

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test-rightfloat</title>
    <style type="text/css">
body {
  width: 100%;
}
.cntr {
  width: 60vh; height: 15vh;
  border: 2px solid red;
}
.lb {
  width: 70%; height: 100%;
  border: 2px dashed blue;
  display: inline-block;
}
.gr {
  width: 15%; height: 100%;
  border: 2px dashed green;
  float: right;/**/
  text-align: center;
  vertical-align: middle;
  line-height: 5em;
  display: inline-block;
  margin: 0; padding: 0;
  /*margin-right:0;
  margin-left:auto;*/
  /*position: absolute; right: 0; left: auto;*/
}
    </style>
  </head>

  <body>
<div id="contain" class="cntr">
  <div id="leftblue" class="lb"></div>
  <div id="greenright1" class="gr">A</div>
  <div id="greenright1" class="gr">B</div>
</div>

  </body>
</html>

...产生这个（Firefox 43）：

...这不是我的想法：正确的 div 都尝试粘在容器的右边缘，因此它们不会并排站立，而是彼此叠放...

我可以做些什么来获得所需的设计（最好是在 CSS5 之前，并且不更改 HTML 结构 - 并且没有 JS）？

【问题讨论】：

稍微压缩尺寸或更改为边框。

标签： html css

【解决方案1】：

您可以在这里使用Flexbox，只需在.gr 上使用flex: 0 0 15% 和flex: 1 在.lb 上使用flex: 1

* {
  box-sizing: border-box;
}
.cntr {
  width: 60vh; 
  height: 15vh;
  border: 2px solid red;
  display: flex;
}
.lb { 
  border: 2px dashed blue;
  flex: 1;
}
.gr {
  flex: 0 0 15%;
  border: 2px dashed green;
}

<div id="contain" class="cntr">
  <div id="leftblue" class="lb"></div>
  <div id="greenright1" class="gr">A</div>
  <div id="greenright2" class="gr">B</div>
</div>

更新：实际上，由于您在 .gr 上都有固定宽度的 15%，您可以在 .lb 上使用 70% 和 floats，但您需要添加 box-sizing: border-box

* {
  box-sizing: border-box;
}
.cntr {
  width: 60vh; 
  height: 15vh;
  border: 2px solid red;
}
.lb { 
  border: 2px dashed blue;
  width: 70%;
  height: 100%;
  float: left;
}
.gr {
  width: 15%;
  height: 100%;
  border: 2px dashed green;
  float: left;
}

<div id="contain" class="cntr">
  <div id="leftblue" class="lb">Left</div>
  <div id="greenright1" class="gr">A</div>
  <div id="greenright2" class="gr">B</div>
</div>

【讨论】：

非常感谢@NenadVracar - flex 是 CSS3 属性，我需要使用 CSS2 语法来处理它；但是，您的解决方案在适当的浏览器中运行良好。干杯！
你能用calc或tables吗？
谢谢，@NenadVracar - 但不幸的是没有；我使用的引擎既不支持calc，也不支持display: table-cell; 等等......
@sdaau 我更新了我的答案，我也刚刚看到你有相同的id，但你不能这样做。

【解决方案2】：

您的问题是由于边框。添加边框时，您应该考虑将边框宽度添加到实际位置的两倍或删除边框

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test-rightfloat</title>
    <style type="text/css">
body {
  width: 100%;
}
.cntr {
  width: 60vh; height: 15vh;
  border: 2px solid red;
}
.lb {
  width: 70%; height: 100%;
  /*border: 2px dashed blue;*/   <--- NO BORDER
  display: inline-block;
}
.gr {
  width: 15%; height: 100%;
  /*border: 2px dashed green;*/  <--- NO BORDER
  float: right;/**/
  text-align: center;
  vertical-align: middle;
  line-height: 5em;
  display: inline-block;
  margin: 0; padding: 0;
  /*margin-right:0;
  margin-left:auto;*/
  /*position: absolute; right: 0; left: auto;*/
}
    </style>
  </head>

  <body>
<div id="contain" class="cntr">
  <div id="leftblue" class="lb"></div>
  <div id="greenright1" class="gr">A</div>
  <div id="greenright1" class="gr">B</div>
</div>

  </body>
</html>

【讨论】：

非常感谢@hugodecasta - 我不知道是边界导致了对齐方式的变化。为了在浏览器中进行测试，我在.gr 类中添加了background-color:rgba(0,200,0,0.5);，然后可以清楚地看到，设计符合预期。干杯！