定位两个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演示文稿。由于主要的演示文稿非常大，包含很多元素，所以我制作了这个bin。

我在Google和Stack Overflow上搜索并找到了以下链接，但我尝试了相同的方法，没有帮助我。

1. 如何将两个div放在一起，其中左侧的大小适合，另一个占据剩余空间？

2. 两个div，一个固定宽度，另一个占据剩余部分

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

- Roy M J

---

像这样吗？https://dev59.com/xXjZa4cB1Zd3GeqPd2oR#19602454 - Mr. Alien

当右侧文本不适合（例如宽度非常小）时，您希望采取什么行为？.inner_right应该隐藏溢出的文本还是容器的高度应该增加？ - andyb

不仅要缩小大小，而且还要保持在右侧。@Mr.Alien建议的链接非常接近我想要的，经过一些小改动，我认为它已经接近我想要的效果了。 - Roy M J

@RoyMJ 无论如何，那就是我的答案 ;) - Mr. Alien

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

这是与该回答相同的问题: Two divs side by side, one with google map and second with fixed width

- ColoO