Jak zapobiec nakładaniu się warstw div podczas zmiany rozmiaru przeglądarki?

Question

Właśnie spędziłem ostatnie kilka tygodni, ucząc się jak poprawnie zaprojektować układ. Zasadniczo myślałem, że wszystko jest perfekcyjne w moim układzie strony i byłem gotowy na przeniesienie kodowania do Wordpressa ... i wtedy przypadkowo zmieniłem rozmiar mojej przeglądarki internetowej i odkryłem, że wszystkie moje warstwy div zachodziły na siebie.

Oto jak to wygląda:

Zasadniczo wydaje się, że to głównie moja zawartość centrum div który jest wyciśnięty, a także moim nagłówka obrazu i nawigacji wiedźmy są w tej samej górnej div. Moja stopka też jest ściśnięta. Szukałem w Internecie rozwiązania tego problemu i nie mogę niczego znaleźć.

Jak to naprawić, aby moje div pozostały na swoim miejscu podczas zmiany rozmiaru przeglądarki?

Answer 1

Wymyśliłem to. Okazuje się, że szerokość środkowego marginesu zawartości była dyktowana marginesami, a nie tylko bezpośrednią szerokością (czyli 500px). Tak więc, gdy strona była zmieniana, marginesy po bokach przeglądarki próbowały pozostać niezmienione, przez co cała kolumna była mniejsza.Po prostu musiałem pozbyć się marginesów i określić, gdzie chcę umieścić kolumnę na stronie i uzasadnić jej szerokość.

Answer 2

Czy możesz opublikować niektóre swoje CSS?

Najprostszym sposobem jest ustawienie względnie rozsądnych ustawień dla wszystkich kolumn, aby wielkość okna przeglądarki nie wpływała na rozmiar układu. Uzyskanie kolumn o zachowaniu płynności jest bardziej złożone i zależy bardziej od specyfiki układu.

Answer 3

jak Walter powiedział, że twój CSS byłby pomocny. Ale głównym problemem jest to, że zawartość w div jest przepełniona do innych elementów div, ponieważ element div zawartości nie może zawierać całej zawartości.
W twoim css, spróbuj ustawić właściwość przepełnienia div na albo auto (pokazuje paski przewijania) albo ukryte (aby po prostu ukryć zawartość, jeśli wychodzi poza div) np.

overflow:auto; 

lub

overflow:hidden; 

Answer 4

Wyraź swoje szerokości i wielkości czcionki w EMS. Oto dobry kalkulator: http://riddle.pl/emcalc/

Procenty również będą działać.

Sprawdź css w stackoverflow i spróbuj zmienić rozmiar w przeglądarce tutaj - zobaczysz wszystko ładnie zmienia się na dowolnym poziomie powiększenia.

Answer 5

Sprawdź właściwość min-width. Innym rozwiązaniem jest zastosowanie innego arkusza stylów, gdy szerokość rzutnia jest poniżej x pikseli z CSS3 Media Queries tak:

@media all and (max-width: 30em) { 
    /* Alternative narrow styles */ 
} 

lub tak:

<link media="all and (max-width: 30em)" 
     rel="stylesheet" href="narrow.css" /> 

CSS3 media Zapytania nie są jeszcze powszechnie obsługiwany, więc może chcesz zajrzyj do rozwiązania, które stosuje "wąski" arkusz stylów z JavaScriptem poprzez zdarzenie window.onresize. Polecam jQuery dla takiego rozwiązania.

Answer 6

możesz również wypróbować min-szerokość. Zakładam, że środek div jest płynny, a paski boczne mają stałą szerokość.

Answer 7

Miałem ten sam problem, jeśli szerokość i wysokość w pojemniku DIV nie ulegnie zmianie z wyjątkiem szerokości, chyba że umieścisz min-szerokość. Problem polegał na tym, że gdybym zrobił okno przeglądarki, div chciałoby przejść do następnej linii, więc to, co zrobiłem, to w pojemniku ustawiłem wysokość i szerokość. Zanim nie ustawiłem wysokości, pozwoliłem divom określić wysokość.