css - 定位两个 div，一个具有固定宽度（左 div），另一个以百分比（右 div）

Question

正如标题所说，我想将两个 div 水平放置在一行中。左侧 div 具有固定宽度（包含图像），而右侧 div 应占据其余空间。

CSS：

.container{
  width:100%;
  background-color:#000000;
  height:auto;
}

.inner_left{
  width:150px;
  float:left;
  height:250px;
  background-color:#FF0000;
}

.inner_right{
  float:left;
  height:250px;
  width:78%;
}

HTML：

  <div class="container">
    <div class="inner_left">test</div>
    <div class="inner_right">Nam a congue risus. Mauris mattis facilisis nisi, eget convallis enim lobortis a. Curabitur non neque nec augue commodo ullamcorper sit amet et lorem! Proin tristique vitae lacus ut consectetur. In at convallis dolor, in laoreet dolor. Etiam in molestie enim! Nunc tincidunt pharetra magna, et sollicitudin enim sodales sed. Morbi pretium sollicitudin lorem, bibendum molestie libero consectetur eu. Nunc aliquet eros purus, vel ultricies sem volutpat quis. Fusce nisi ligula; venenatis tristique turpis sit amet, semper adipiscing ante. Aliquam in justo fermentum, interdum nulla vestibulum, ornare augue.

      </div>    
  </div>

我尝试过的：

http://jsbin.com/arIPIHe/2/

http://jsbin.com/arIPIHe/3/

只要我不更改浏览器分辨率，第二个链接就可以正常工作。一旦我减小浏览器宽度，右侧 div 就会转到左侧 div 下的下一行。

我已经使用我在工作中拥有的元素创建了 jsbin 演示。我做了这个垃圾箱，因为主要的垃圾箱很大，里面有很多元素。

我在谷歌和堆栈中搜索并获得了以下链接，但我尝试了同样的方法，但它对我没有帮助。

1. 如何将两个 div 并排放置，其中 LEFT 的大小适合，而其他的则占用剩余空间？

2. 两个 div，一个固定宽度，另一个，其余的

我如何定位右侧 div 以便它始终保持在左侧 div 旁边并占据剩余的宽度。我无法理解这一点。

Answer 1

CodePen 演示

使用 CSS 位置

CSS

*{
  margin:0;
  padding:0;  
}

.wrapper{
    margin-top:10px;

    position :relative;
    width: 100%;
    margin: 0px auto;
    height:250px;
}
.inner_left {
  position : absolute;
  top:0;
  left:0;
  bottom:0;
  background: orange;
  width: 250px;


}
.inner_right{
  position :absolute;
  top:0;
  right:0;
  bottom:0;
  left:250px;  
  background:blue; 
}

这是这个答案的同一个问题： 两个并排的div，一个带有谷歌地图，第二个带有固定宽度