Почему минимальная ширина и максимальная ширина работают, как я ожидаю?

Я пытаюсь настроить макет страницы 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>

Вот что я ожидать случиться:

С помощью браузера максимизируется, дивы сидеть бок о бок, каждый 400px широка: их максимальная ширина
Сжать окно браузера, и они оба сокращаются до 200 пикселей: их минимальная ширина
Дальнейшее сокращение браузера не влияет на них

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

уменьшить окно браузера, и как только они не могут сидеть бок о бок по их ширине макс, то второй ДИВ падает ниже первый
Дальнейшее сокращение браузер делает их получить уже и уже, как малые, как я могу сделать окно

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

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

И конечно ...

Что я делаю неправильно?

источник

2010-05-14 Nathan Long

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

источник

2010-05-14 20:53:14 Amber

Обернутый разделитель вокруг них обоих и дал ему одно правило: 'width: 900px;'. Теперь они никогда не сидят бок о бок. Попробовал добавить левый поплавок на случай, если он рухнет. Без изменений. –

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

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

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

удачи.

источник

2010-05-14 20:56:39 codedude

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

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

Пока экспериментируют поплавки только действительно работают хорошо, когда у них есть width набор, так что я хотел бы использовать родительский div с мин и максимальной шириной набора и добавить width: 50% к дочерним дивы. Это решает все ваши проблемы, кроме разметки разделов. Для этого я бы, вероятно, ссылался на 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>

источник

2010-05-14 21:00:31

Почему минимальная ширина и максимальная ширина работают, как я ожидаю?

ответ

Смежные вопросы