Wewnętrzna granica css, zepsuty układ

Podzielam ekran z wieloma div, więc przyklejają się jeden do drugiego (powiedzmy, coś w rodzaju szachownicy, ale z polami o różnych rozmiarach). Ustawiłem heigth i width używając procenta (względem kontenera nadrzędnego).Wewnętrzna granica css, zepsuty układ

Teraz, kiedy dodać border: 1px do div, wszystkie przerwy układ ... Wyobrażam sobie, że granica dodaje 1px z każdej strony, a rozwiązaniem byłoby dodać kilka wewnętrznego granicy. Czy mogę w jakiś sposób dodać taką wewnętrzną granicę?

Źródło

2011-07-19 Jakub M.

Można użyć box-sizing: border-box, aby utworzyć szerokość krawędzi elementu width elementu.

.example { 
    -webkit-box-sizing: border-box; 
     -moz-box-sizing: border-box; 
      box-sizing: border-box; 
}

Browser support.

Źródło

2011-07-19 16:46:11 thirtydot

/* Zapominasz -ms dla IE */ \t \t \t -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; –

@EmilioYero: Nie, nie zrobiłem tego. Spójrz na link "obsługa przeglądarki" pod koniec mojej odpowiedzi. IE7 w ogóle go nie obsługuje, podczas gdy IE8 i wyższe obsługują go bez prefiksu dostawcy. – thirtydot

Użyj właściwości konturu. W przeciwieństwie do właściwości granicy nie "dodaje" do wysokości ani szerokości elementów. Jednak także w odróżnieniu od własności granicznej nie można mieć lewej, prawej, dolnej lub lewej poszczególnych właściwości. Chociaż możesz mieć właściwości stylu konspektu, szerokości obrysu i koloru obrysu.

Outline Refrence

Źródło

2011-07-19 16:43:55 Jawad

Jak to działa we wszystkich przeglądarkach chociaż? – Phil

@Phil: Nie jestem pewien, ale myślę, że właściwość outline jest dobrze obsługiwana nawet w starszych przeglądarkach. Jestem gotów sprostować. – Jawad

Obsługa przeglądarki: http://reference.sitepoint.com/css/outline#compatibilitysection – thirtydot

można zmniejszyć procenty 0.5 czyniąc je 49.5% EDIT: Początku nie będzie działać, dzięki @thirty

Źródło

2011-07-19 16:44:41 Phil

'outset' nic nie zmieni. – thirtydot

powiedzmy, jeśli masz div nadrzędnej i wiele div potomnych. Gdy ustawisz wysokość i szerokość jako wartości procentowe, sprawisz, że będą się ze sobą trzymały. Następnie, dodając border:1px, ich szerokość będzie dłuższa niż poprzednio. Aby rozwiązać ten problem, powiedziałbym, że powinieneś mieć another div after the parent div, aby zapobiec zmianie rozmiaru.

Źródło

2011-07-19 16:46:09

Nie mam pojęcia, jak to rozwiązałoby problem! – Jawad

@Jawad: spróbuj usunąć "dopełnienie" i "margines", a następnie zawiąże wszystkie elementy div razem. –

Wewnętrzna granica css, zepsuty układ

Odpowiedz

Powiązane problemy