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 演示。我做了这个垃圾桶，因为主要的垃圾桶很大，里面有很多元素。

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

1. How to place two divs side by side where LEFT one is sized to fit and other takes up remaining space?

2. Two divs, one fixed width, the other, the rest

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

Answer 1

CodePen Demo

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

这是这个答案的同一期: Two divs side by side, one with google map and second with fixed width