CSS max-width с процентом

max-width с процентом, похоже, не работает ни в IE 8, ни в Firefox 3. Конкретные ширины пикселей отлично работают. Я что-то упускаю?CSS max-width с процентом

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

Я раньше не использовал максимальную ширину, но это было отличное решение. Я написал этот простой стиль CSS:

div.hint {max-width: 50%; float: right;}

Тогда я писал:

<div class=hint>... hint text</div> 
<form action=xxx method=post> 
... etc ...

div.hint давит форму сильно влево.

Я попробовал это с помощью некоторого текста вместо формы. Div.hint занимает около 95% экрана, просто дает небольшой запас слева, а затем другой текст подталкивается полностью под ним.

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

Процент процентов не работает с максимальной шириной, несмотря на то, что я читал в документации, или я чего-то не хватает?

В ответ на комментарий Seanmonster в: Здесь я дам тривиальный, но полный веб-страницу, которая показывает, что я думал, что должно работать, но это не так:

<html><title>Max width test</title> 
<style> 
.form {max-width: 75%; float: left;} 
.hint {max-width: 50%; float: right;} 
</style> 

<div class=hint> 
<p>Fourscore and seven years ago our forefathers brought forth on this continent a new nation, conceived in liberty and dedicated to the proposition that 
all men are created equal. We are now engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, 
can long endure. We are met on a great battlefield of that war. We have come to dedicate a portion of that field as a final resting place 
for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. Etc. 
</div> 
<div class=form> 
<table> 
<tr><th>Label 1 <td>Value 1 
<tr><th>Label 2 <td>Value 2 
<tr><th>Label 3 <td>Value 3 
</table> 
</div> 
</html>

Когда я открываю эту страницу в браузер, я получаю, а не два столбца, но div «hint» принимает 100% ширины, а ниже «div» формы принимает 100% ширины. Если я изменил как максимальную ширину на «width: 50%», я получу два столбца, как я ожидал. По-видимому, я пропустил что-то о том, как max-width должен работать, но ... я не понимаю.

источник

2009-10-04 Jay

С информацией вы данной, ваша проблема не должна существовать. Возможно, вы могли бы найти ссылку на пример, чтобы мы видели, как это происходит в дикой природе. – seanmonstar

Я открыл ваш пример кода в FF3.5.3 на Mac и ПК, и он работал нормально. Я получаю поведение, которое вы описываете в IE 7, и не тестируете 8. – Emily

@Emily: Я только пробовал пример выше с IE 8, прежде чем отправлять его. Я буду говорить на нем, что он работает с Firefox. Но я пробовал другие аналогичные примеры, которые не совпадали с Firefox, поэтому, по-видимому, они не полностью защищены от первопричины.В любом случае, я действительно хочу что-то, что работает, по крайней мере, с IE 7, IE 8 и Firefox 3, поскольку они, вероятно, являются наиболее популярными браузерами. – Jay

max-width на IE8 неисправен в нескольких сценариях. Это известная проблема.

Здесь вы можете найти статью. http://edskes.net/ie8overflowandexpandingboxbugs.htm

Вам нужны три вещи, чтобы вызвать эту ошибку - MaxWidth, полосы прокрутки, и поплавок

источник

2009-10-13 20:42:04 diadem

, как сказал seanmonstar, вам также нужно утомлять элементы внешнего вида. В старые времена (т. Е.-7), если у вас была ширина 100%, она расширялась настолько, насколько это возможно. В новые дни элементы имеют значение по умолчанию ничто, а это значит, что каждый окружающий элемент должен иметь ширину в 100%; это не предполагается. – diadem

Я думаю, что ошибка возникает в большем количестве ситуаций, чем это сообщение указывает, потому что я получил ее, например, пытаясь сделать те, у которых есть таблица с двумя столбцами, а не с помощью float. Но спасибо: зная, что это известная ошибка, а не только то, что я схожу с ума, не решает проблему, но по крайней мере говорит мне искать совершенно другое решение. – Jay

@Diadem: Я попытался возиться с установкой ширины родительского элемента на 100% в одном из моих тестовых примеров, и это не помогло. Конечно, возможно, что с правильной комбинацией настроек это сработает, и я просто не пострадал от этого. Хорошо, я думаю, что я откажусь от максимальной ширины, пока не появятся новые версии браузера. – Jay

Max-width отлично работает в FF3 и IE8 с процентами. Проценты, однако, основаны на ширине родителя. Не дети вокруг него.

источник

2009-10-04 21:54:28 seanmonstar

Для получения наилучших результатов убедитесь, что ширина родителя является статическим значением. –

Дети вокруг него? Это не имеет смысла ... Вы имеете в виду родных братьев? –

Если вы должны были плавать div.hint и формировать оба слева и иметь их обоих с максимальной шириной 50%, они не должны хлюпать друг друга.

<div> 
    <div class="form" style="float:left; max-width:50%"> 
    <form></form> 
    </div> 
    <div class="hint" style="float:left; max-width:50%"> 
    </div> 
</div>

источник

2009-10-11 23:11:32 CMN

Ну, я попробовал это. И первый div получает 100% ширины экрана и выходит на первое место; второй div находится под 100% ширины экрана. Это как max-width полностью игнорируется. Если я изменю «максимальную ширину» на «ширину», то она будет работать, за исключением того, что тогда ширина будет фиксированной, а не переменной. – Jay

CSS max-width с процентом

ответ

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