Dlaczego maksymalna szerokość nie zastępuje szerokości minimalnej?

Próbuję utworzyć responsywny układ, w którym dwa pola znajdują się obok siebie, jeśli pozwala na to rozmiar ekranu, i mają je poniżej siebie, jeśli tak nie jest. Jeśli pudełka są poniżej siebie, chciałbym, aby były wyśrodkowane na rodzica. Mam założyć jsfiddle wykazać problem:Dlaczego maksymalna szerokość nie zastępuje szerokości minimalnej?

http://jsfiddle.net/leongersen/KsU23/

width: 50%; 
min-width: 350px; 
max-width: 100%;

Spróbuj rozmiaru okienka 'wynik' poniżej 350px. Elementy będą nakładać się na rodzica.

Moje pytanie:

Dlaczego nie jest określona maksymalna szerokość zaszczyceni, chociaż chodzi po min-width?

Mogę oczywiście użyć zapytania o media, ale chciałbym wiedzieć, dlaczego tak się dzieje.

Źródło

2013-04-17 Lg102

Nie widzę problemu. Dochodzą do 50%, jeśli zwiększam je o 50%, jeśli sprawię, że będzie on mniejszy niż 700px, to będą one miały minimalną szerokość 350 pikseli i będą się pakować (drugi trafi do nowego wiersza). Czego się spodziewasz? –

Czerwone pola zachodzą na element nadrzędny, jeśli jest on mniejszy niż 350 pikseli. – Lg102

@FranciscoZarabozo - Lg102 wydaje się oczekiwać maksymalnej szerokości 100% do przejęcia, gdy rozmiar rodzica jest mniejszy niż suma minimalnej szerokości elementów potomnych. rodzaj doradczej szerokości min tam, gdzie to możliwe – CodeMonkey

Ze względu na CSS standards:

następujący algorytm opisuje, w jaki sposób dwie właściwości wpływają na użytej wartości „szerokości” własności:

Wstępna używane szerokość jest obliczana (bez "min-width" i "max-width") zgodnie z regułami "Obliczanie szerokości i marginesów" powyżej.

Jeśli wstępna używana szerokość jest większa niż "maksymalna szerokość", powyższe reguły zostaną zastosowane ponownie, ale tym razem za pomocą obliczona wartość "maksymalna szerokość" jako obliczona wartość "szerokość".

Jeśli uzyskana szerokość jest mniejsza niż "min-szerokość", reguły powyżej są stosowane ponownie, ale tym razem używają wartości "min-width" jako obliczonej wartości "width".

Jako taka szerokość min zawsze "wygrywa". W ramach określonej reguły CSS i tak nie ma precedensu, wszystkie wartości są stosowane atomowo. Pierwszeństwo występuje tylko wtedy, gdy różne reguły odnoszą się do tego samego elementu, a nawet wtedy opiera się ono na specyfice najpierw przed rozważeniem kolejności plików.

Źródło

2013-04-17 15:15:41

Pierwszeństwo występuje tylko wtedy, gdy * ta sama zasada * odnosi się do elementu wiele razy. tj. '.foo {bar: fizz; pasek: buzz; } "ta ostatnia definicja ma pierwszeństwo. W tym przykładzie 'min-width' i' max-width' są różnymi regułami, więc pierwszeństwo nie wchodzi w to. – zzzzBov

To nie jest tak naprawdę pierwszeństwo. Kiedy * deklaracja * jest duplikowana w ramach * reguły *, jest po prostu nadpisaniem tej samej wartości wynikającej z sekwencyjnego analizowania. Reguły wynikowe (z regułą będącą selektorem i zbiorem deklaracji) mogą mieć pierwszeństwo w zależności od specyfiki selektora, lub jeśli 2 reguły są jednakowo specyficzne, pojawia się "kaskadowy" efekt CSS i ta druga definicja jest uważana za bardziej szczegółowo. –

Chodzi mi o to, że twój wpis mówi: "Pierwszeństwo występuje tylko wtedy, gdy różne reguły odnoszą się do tego samego elementu", kiedy powinno być "Pierwszeństwo pojawia się tylko wtedy, gdy ta sama reguła stylu jest stosowana do tego samego elementu" – zzzzBov

Dlaczego maksymalna szerokość nie zastępuje szerokości minimalnej?

Odpowiedz

Powiązane problemy