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

【问题标题】：Positioning two divs, one with fixed width(left div) and other in percentage(right div)定位两个 div，一个具有固定宽度（左 div），另一个以百分比（右 div）
【发布时间】：2013-10-31 10:28:32
【问题描述】：

正如标题所说，我想将两个 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 和堆栈中搜索并获得了以下链接，但我尝试了同样的方法，但它对我没有帮助。

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

【问题讨论】：

喜欢这个？ stackoverflow.com/questions/19602416/…
当 right 文本不适合时（例如当宽度非常小时），你想要什么行为？。 .inner_right 应该隐藏溢出的文本还是应该增加容器的高度？
不只是它缩小了尺寸并保持在右侧。 @Mr.Alien 建议的链接非常接近我想要的，在做了一些小改动之后，我认为它达到了我想要的样子。
@RoyMJ 不管怎样，这就是我的答案；）

标签： css html media-queries css-position

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

【讨论】：