Почему атрибут CSS min-width не заставляет div иметь указанную минимальную ширину? - PullRequest
Новая
       12

Почему атрибут CSS min-width не заставляет div иметь указанную минимальную ширину?

18 голосов
/ 13 октября 2008 
<html>
    <head>
        <style type="text/css">
            div {
                border:1px solid #000;
                min-width: 50%;
            }
        </style>
    </head>
    <body>
        <div>This is some text. </div>
    </body>
</html>

Я считаю, что div должен составлять 50 процентов страницы, если, по какой-то причине, текст внутри div не увеличивает его. Тем не менее, граница вокруг div простирается по всей ширине страницы. Это происходит как в IE, так и в Firefox.

Предложения

Ответы [ 6 ]

14 голосов
/ 14 октября 2008

Я считаю, что div должен составлять 50 процентов страницы, если, по какой-то причине, текст внутри div не увеличивает его.

min-width не устанавливает минимальную начальную ширину, из которой будет расти ваш блок; скорее это ограничивает, насколько далеко блок может сжаться.

В min-width: 50%;, 50% относится к содержащему блоку. Я никогда не использовал проценты с min-width, но я считаю, что это может быть полезно с другими единицами. Например, если у меня есть блок (например, столбец текста), который я хочу иметь полную ширину, но я не хочу, чтобы он был меньше минимальной ширины, я мог бы использовать что-то вроде {width: 100%; min-width: 250px;}.

Обратите внимание на предостережения о поддержке IE, упомянутые другими.

8 голосов
/ 13 октября 2008

Если вы предоставите absolute позиционирование элемента, в Firefox будет 50%. Однако IE не нравится атрибуты min-width или min-height, поэтому вам придется определить ширину как 50%, чтобы она работала в IE.

7 голосов
/ 13 октября 2008

Без min-width ваш div будет занимать всю ширину страницы, как ведут себя элементы display:block. Добавление min-width не может сделать его меньше.

Изменение свойства display на absolute или float, свойство left приведет к уменьшению элемента до размера содержимого. Затем min-width начинает обретать смысл.

2 голосов
/ 14 октября 2008

Вы говорите, что минимальная ширина составляет 50%. Поскольку больше ничего не занимает место, оно займет все это (кроме полей).

Если вы дадите ему максимальную ширину, скажем, 75%, Firefox должен ограничить это. IE6 все равно будет игнорировать это.

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

2 голосов
/ 13 октября 2008

Чтобы добавить к тому, что Крис Серра сказал , в IE <7 (а в 7? Я не могу отслеживать в эти дни, но определенно <8), <code>width ведет себя точно так же, как min-width должен вести себя.

0 голосов
/ 07 ноября 2008

Возможно, вы захотите попробовать таблицу стилей, специфичную для IE, с включением и выражением типа: 

print("width:expression(document.body.clientWidth < 1024? "50%" : "100%");");

Это изменит настройку ширины в зависимости от ширины окна браузера во время загрузки. Мне лично нравится использовать px в качестве единицы измерения, но вам нужно попробовать это с вашей конкретной настройкой.

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

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

...