定位两个div，一个固定宽度（左边div）和其他百分比（右边div）

如标题所示，我想将两个div水平放置在一行中。左侧div的宽度是固定的（包含图像），而右侧的div应该占据空间的其余部分。定位两个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 demo，其中包含了我在工作中使用的元素。我做了这个垃圾箱，因为它的尺寸非常大，里面包含了很多元素。

我周围搜索了谷歌以及堆栈，并得到以下链接，但我也一样尝试，并没有帮助我。

我怎样才能姿势下的右侧DIV，使其始终保持旁边的左侧DIV也占据剩余的宽度。我无法理解这一点。

来源

2013-10-31 Roy M J

喜欢这个？ http://stackoverflow.com/questions/19602416/css-how-to-fill-the-entire-width/19602454#19602454 –

当_right_文本不适合时，您想要什么行为（例如，当宽度非常小）？。 “.inner_right”应该隐藏溢出的文本还是容器的高度增长？ – andyb

不仅仅是它减少了尺寸并保持在右侧本身。 @Alien先生建议的链接与我想要的非常接近，在做了小小的改动之后，我认为它达到了我想要的程度。 –

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

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

来源

2013-11-22 09:05:08 ColoO

定位两个div，一个固定宽度（左边div）和其他百分比（右边div）

回答

相关问题