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

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

How to place two divs side by side where LEFT one is sized to fit and other takes up remaining space?
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

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

1 个答案: