Автоматическое изменение размера центра div с помощью css?

Question

Мне сложно получить 3 divs для автоматического изменения размера при изменении размера окна браузера/страницы.

У меня есть два div фиксированного размера, и я хочу, чтобы центр div автоматически изменял размер, чтобы заполнить оставшееся пространство и не иметь третьего обтекания div для новой строки, когда размер страницы сокращается.

Я установил свойство min-width на div, которое обертывает три div, чтобы предотвратить обертку третьего div, когда средний div имеет ширину около 65px.

Это должно быть сделано с помощью javascript, потому что я в настоящее время пытаюсь достичь этого с помощью css, но мне не повезло.

выражение javascript или css будет чем-то вроде width = page.width - div1.width -div3.width, но я бы хотел избежать использования js, если это возможно.

Спасибо за помощь!

Майк

Вы можете увидеть ожидаемое поведение в прилагаемом изображении.

1) То, что я хочу 2) То, что я в настоящее время испытывает на усушку

У меня есть Div повторное определение размеров и текстовое поле внутри установлен на уровне 100%, так что повторно размеры с div.

Однако правая сторона div может быть либо 267px, как показано ниже, либо 192px (дискретная), если я просто задаю правое поле с кодом на некоторых страницах? Или есть способ сделать правую маржу динамичной в зависимости от размера div?

например. HTML

<div id="wrapper"> 
    <div id="left"></div> 
    <div id="right"></div> 
    <div id="centre">   
    <div> 
</div> 

CSS

#wrapper 
{height:84px; 
background-image:url(../images/siteImages/header_back.png); 
background-repeat: repeat-x;} 

#left 
{height:inherit; 
width:512px; 
background-image:url(../images/siteImages/logo.png); 
background-repeat: no-repeat; 
float:left;} 

#centre 
{width:auto; 
margin-left:512px; 
margin-right:267px; 
height:inherit;} 

#right 
{padding-right:10px; 
height:inherit; 
float:right; 
text-align:right;} 

Answer 1

Вы могли бы что-то вроде:

<div id="a">...</div> 
<div id="c">...</div> 
<div id="b">...</div> 

С помощью этого CSS:

#a { width: 512px; float: left; } 
#b { width: auto; margin-left: 512px; margin-right: 200px;} 
#c { width: 200px; float: right; } 

который я считаю, будет делать то, что вы ищете.

Answer 2

Вы пробовали:

<div id="div2" style="margin-left:auto;margin-right:auto;">content</div> 

удаления любого min-width вы можете иметь на div2

Answer 3

Просто попробуйте это в вашем CSS

#centre {overflow:hidden;} 

нет необходимости указывать ширину & маржу & высоты; , Он будет автоматически настроен. Не нужно менять свой HTML-код.