定位两个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; 
}

这是一个相同的答案: 两个divs并排,一个与谷歌地图和第二个固定宽度