Авторазмер центра Div с использованием CSS? - PullRequest
Новая
       42

Авторазмер центра Div с использованием CSS?

2 голосов
/ 07 марта 2012

У меня проблемы с получением 3-х делений для автоматического изменения размера при изменении размера окна / страницы браузера.

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

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

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

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

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

Mike

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

1) Что я хочу 2) Что я испытываю в настоящее время при сжатии

1)expected div behavior 2)current div behaviour

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

Тем не менее, правая сторона div может быть либо 267px, как показано ниже, либо 192px (дискретно), я должен просто установить margin-right с кодом позади на определенных страницах?Или есть способ сделать динамическое поле margin динамическим, основываясь на размере права 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;}

Ответы [ 3 ]

5 голосов
/ 07 марта 2012

Вы можете иметь что-то вроде: 

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

Который, я думаю, сделает то, что вы ищете.

0 голосов
/ 07 марта 2012

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

#centre {overflow:hidden;}

не нужно указывать ширину, поля и высоту;,Это будет автоматически настроено.Не нужно менять порядок HTML.

0 голосов
/ 07 марта 2012

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

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

удаление любых min-width, которые вы можете иметь на div2

...