定位兩個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）

回答

相關問題