Почему min-width и max-width не работают так, как я ожидаю? - PullRequest
Новая
       0

Почему min-width и max-width не работают так, как я ожидаю?

6 голосов
/ 15 мая 2010

Я пытаюсь настроить макет страницы CSS, используя min-width и max-width. Чтобы упростить задачу, я сделал эту тестовую страницу. Я пробую это в последних версиях Firefox и Chrome с теми же результатами. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">
       div{float: left; max-width: 400px; min-width: 200px;}
       div.a{background: orange;}
       div.b{background: gray;}
    </style>
  </head>
  <body>
    <div class="a">
      (Giant block of filler text here)
    </div>
    <div class="b">
      (Giant block of filler text here)
    </div>
  </body>
</html>

Вот что я ожидаю, что произойдет:

  • При развернутом браузере элементы div расположены рядом друг с другом шириной 400 пикселей: их максимальная ширина
  • Уменьшите окно браузера, и они оба уменьшатся до 200 пикселей: их минимальная ширина
  • Дальнейшее сжатие браузера не влияет на них

Вот что на самом деле происходит , начиная с шага 2:

  • Уменьшите окно браузера, и как только они не смогут сидеть рядом на своей максимальной ширине, второй div опустится ниже первого
  • Дальнейшее сжатие браузера делает их все меньше и меньше, насколько я могу сделать окно

Итак, вот мои вопросы:

  • Что означает max-width, если элемент быстрее запрыгнет в макет, чем опустится ниже максимальной ширины?
  • Что означает min-width, если элемент с радостью станет уже, чем если окно браузера продолжает уменьшаться?
  • Есть ли способ добиться того, чего я хочу: расположить эти элементы рядом друг с другом, сжимаясь до тех пор, пока они не достигнут 200px каждый, и только тогда настроить макет так, чтобы второй опускался вниз

И конечно ...

Что я делаю не так?

Ответы [ 3 ]

1 голос
/ 15 мая 2010

Я думаю (и это только из моего личного опыта), что max-width применяется к содержимому внутри div. Таким образом, если бы в div было только 1 слово, оно было бы шириной 200px, но если бы в div было 300 слов, ширина была бы 400px.

Я думаю, что есть способ сделать то, что вы хотите сделать. Эта статья может относиться к этому:

http://net.tutsplus.com/tutorials/design-tutorials/quick-tip-different-layouts-for-different-widths/

Удачи.

1 голос
/ 15 мая 2010

Чтобы ответить хотя бы немного:

min-width действительно означает, что браузер должен показывать горизонтальную полосу прокрутки для страницы.

Хотя эксперименты с плавающей точкой действительно хорошо работают только тогда, когда у них установлен width, я бы использовал родительский div с минимальной и максимальной шириной и добавил width: 50% к дочерним элементам div. Это решает все ваши проблемы, кроме изменения макета divs. Для этого я бы, вероятно, сослался на javascript. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Testing min-width and max-width</title>
    <style type="text/css">
       div.cont {max-width: 700px; min-width: 400px;}
       div.a, div.b {float: left; width: 50%; }
       div.a{background: orange;}
       div.b{background: gray;}
    </style>
  </head>
  <body>
      <div class="cont">
    <div class="a">
      Morbi malesuada nulla nec purus convallis consequat... 
    </div>
    <div class="b">
      Vivamus id mollis quam. Morbi ac commodo nulla... 
    </div>
    </div>
  </body>
</html>
1 голос
/ 15 мая 2010

Причина, по которой они «опускаются», связана с изменением размера их родительского элемента (в данном случае body). Оберните вокруг них обертку div шириной 400 пикселей и более, и вы сможете держать их рядом.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...