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

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

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

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

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

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

Майк

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

1) То, что я хочу 2) Что я сейчас испытываю по усадке

1)expected div behavior 2)current div behaviour

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

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

Например. 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;}
2
Mike Saull 7 Мар 2012 в 04:00

3 ответа

Лучший ответ

У вас может быть что-то вроде:

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

Что, я считаю, сделает то, что вы ищете.

5
Manux22 1 Июл 2016 в 18:26

Попытался ли ты:

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

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

0
thirtydot 7 Мар 2012 в 00:06

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

#centre {overflow:hidden;}

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

0
sreejesh 7 Мар 2012 в 05:16