Maksymalna szerokość CSS z procentem

Maksymalna szerokość z procentem nie działa w IE 8 ani Firefox 3. Właściwe szerokości piksela działają dobrze. Czy czegoś brakuje?Maksymalna szerokość CSS z procentem

Mam formularz wejściowy i chcę wyświetlić tekst objaśniający po prawej stronie. Ale nie chcę, aby tekst wyjaśniający niszczył formę.

Nie korzystałem jeszcze z szerokości maksymalnej, ale wydawało się to doskonałym rozwiązaniem. Napisałem ten prosty styl CSS:

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

Potem napisał:

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

div.hint zgniecie formę poważnie w lewo.

Próbowałem tego z tylko trochę tekstu zamiast formularza. Div.hint zajmuje około 95% ekranu, po prostu daje niewielki margines po lewej stronie, a następnie drugi tekst jest pchnięty całkowicie poniżej niego.

Jeśli zmienię maksymalną szerokość z procentu na stałą liczbę pikseli, wygląda na to, że działa. Ale nie chcę oprzeć go na pikselach, ponieważ nie znam wymiarów przeglądarki użytkownika.

Czy procent nie działa z maksymalną szerokością pomimo tego, co przeczytałem w dokumentacji, czy coś mi brakuje?

W odpowiedzi na komentarz Seanmonster za: Tutaj dam trywialny ale kompletną stronę internetową, która pokazuje, co myślę powinny działać, ale nie:

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

Kiedy otworzyć tę stronę w przeglądarki, dostaję, nie dwie kolumny, ale "podpowiedź" div biorąc 100% szerokości, a poniżej "div" formularza biorąc 100% szerokości. Jeśli zmienię zarówno maksymalną szerokość na "szerokość: 50%", otrzymam dwie kolumny, jak można się spodziewać. Najwyraźniej brakuje mi czegoś o tym, jak powinna działać maksymalna szerokość, ale ... Nie rozumiem.

Źródło

2009-10-04 Jay

Z dałeś informacji, problem nie powinien istnieć. Być może dasz nam link do przykładu, abyśmy mogli zobaczyć, jak dzieje się to na wolności. – seanmonstar

Otworzyłem twój przykładowy kod w FF3.5.3 na komputerze Mac i PC i działało dobrze. Dostaję zachowanie, które opisujesz w IE 7, i nie masz 8 do przetestowania. – Emily

@Emily: Próbowałem tylko powyższego przykładu z IE 8 przed opublikowaniem go. Powiem ci na słowo, że działa z Firefoksem. Ale próbowałem innych, podobnych przykładów, które zawiodły podobnie w Firefoksie, więc najwyraźniej nie są one całkowicie odporne na główną przyczynę.W każdym razie naprawdę chcę czegoś, co działa z przynajmniej IE 7, IE 8 i Firefox 3, ponieważ są to prawdopodobnie najpopularniejsze przeglądarki. – Jay

maksymalna szerokość na IE8 jest błędna w wielu scenariuszach. Jest to znany problem.

Możesz znaleźć artykuł na ten temat tutaj. http://edskes.net/ie8overflowandexpandingboxbugs.htm

potrzebne są trzy rzeczy, aby wywołać ten błąd - maxwidth, paski przewijania, i pływak

Źródło

2009-10-13 20:42:04 diadem

, jak powiedział seanmonstar, musisz też być zmęczony elementami outtera. W dawnych czasach (tj. -7), jeśli miałeś szerokość 100%, rozwinął się tak daleko, jak to możliwe. W nowych dniach elementy mają domyślną wartość nic, co oznacza, że każdy otaczający element musi mieć szerokość równą 100%; nie jest to przyjęte. – diadem

Myślę, że błąd występuje w większej liczbie sytuacji niż ten post wskazuje, ponieważ dostałem go, na przykład, próbując zrobić te z tabelą dwukolumnową, zamiast używać float. Ale dzięki: Wiedząc, że to znany błąd, a nie tylko, że zwariowałem, nie rozwiązuje problemu, ale przynajmniej mówi mi, żebym szukał zupełnie innego rozwiązania. – Jay

@Diadem: Próbowałem majstrować przy ustawianiu szerokości elementu nadrzędnego na 100% w jednym z przypadków testowych i to nie pomogło. Z pewnością jest możliwe, że przy odpowiedniej kombinacji ustawień zadziała, a ja po prostu tego nie zrobiłem. Cóż, myślę, że zamierzam zrezygnować z maksymalnej szerokości, dopóki nie pojawią się nowe wersje przeglądarki. – Jay

Maksymalna szerokość działa idealnie dokładnie w FF3 i IE8 z procentami. Wartości procentowe są jednak oparte na szerokości rodzica. Nie dzieci wokół niego.

Źródło

2009-10-04 21:54:28 seanmonstar

Aby uzyskać najlepsze wyniki, upewnij się, że szerokość nadrzędna jest wartością statyczną. –

Dzieci wokół niego? To naprawdę nie ma sensu ... Masz na myśli rodzeństwo? –

Jeśli miałbyś unieść div.hint i uformować oba w lewo i mieć oba z maksymalną szerokością 50%, nie powinni zgniatać się nawzajem.

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

Źródło

2009-10-11 23:11:32 CMN

Cóż, próbowałem tego. I pierwszy div dostaje 100% szerokości ekranu i jest na wierzchu; drugi element div znajduje się pod spodem ze 100% szerokości ekranu. To tak, jakby maksymalna szerokość została całkowicie zignorowana. Jeśli zmienię "max-width" na "width", to działa, z wyjątkiem oczywiście, że wtedy szerokości są ustalone, a nie zmienne. – Jay

Maksymalna szerokość CSS z procentem

Odpowiedz

Powiązane problemy