Бок о бок div, где правый div имеет фиксированную ширину

Question

У меня есть два divs, #left и #right внутри #container. Левый div является жидким. Правый div имеет фиксированную ширину. Как я могу заставить левый div сжиматься или расширяться при изменении размера браузера, пока правый div остается на месте? Кажется, не удается выполнить эту работу. Удивительно, что противоположное (левое div фиксированное, правое div-жидкость) легко.

Заранее за вашу помощь. Вот код:

#container { 
 
    width: 80%; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    border: 1px solid grey; 
 
} 
 

 
#left { 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 

 
#right { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
}

<div id="container"> 
 
    <div id="left">   
 
    </div> 
 
    <div id="right"> 
 
    </div> 
 
</div>

CSS:

Answer 1

я, наконец, нашел решение. Вот код выше с некоторыми дополнениями, которые делают его работу:

div { 
 
    margin: 0px; 
 
} 
 

 
#container { 
 
    width: 80%; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    border: 1px solid grey; 
 
} 
 

 
#left { 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: red; 
 
    float: left; /*Add This*/ 
 
    margin-right: -200px; /*Add This*/ 
 
} 
 

 
/*Add This new Div*/ 
 
#inside { 
 
    margin-right: 200px; /*Add This*/ 
 
} 
 

 
#right { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
    float: right; /*Add This*/ 
 
}

<div id="container"> 
 
    <div id="left"> 
 
     <div id="inside"> <!--Add This--> 
 
     </div> 
 
    </div> 
 
    <div id="right"> 
 
    </div> 
 
</div>

Вот сайт, который помог мне: http://alistapart.com/article/negativemargins

Answer 2

Вы должны поместить правильный плавал DIV перед левой (жидкости) DIV и добавить поплавка право #right

здесь является рабочим примером http://jsfiddle.net/936u0d3b/

#container { 
 
    width: 80%; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    border: 1px solid grey; 
 
} 
 

 
#left { 
 
    height: 100px; 
 
    background-color: red; 
 
} 
 

 
#right { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: green; 
 
    float:right; 
 
}

<div id="container"> 
 
    <div id="right"> 
 
    </div> 
 
    <div id="left">   
 
    </div> 
 
</div>

Answer 3

Хотя Пема прекрасно ответил на его/ее вопрос, вот еще один простой подход без изменения разметки, которая работает до IE9:

CSS:

#container { 
    width: 80%; 
    height: 200px; 
    margin: 0 auto; 
    border: 1px solid grey; 
} 

#left { 
    width: calc(100% - 100px); /* added */ 
    float: left; /* added */ 
    box-sizing: border-box; /* added */ 
    height: 100px; 
    background-color: red; 
} 

#right { 
    float: right; /* added */ 
    box-sizing: border-box; /* added */ 
    width: 100px; 
    height: 100px; 
    background-color: green; 
} 

HTML:

<div id="container"> 
    <div id="left">   
    </div> 
    <div id="right"> 
    </div> 
</div>