Jak dodać ramki do elementu div bez komplikowania układu?

Mam następujące elementy:Jak dodać ramki do elementu div bez komplikowania układu?

<body> 
    <div id="container"> 
     <div id="sidebar1"></div> 
     <div id="content"> 
      <h3>Lorem ipsum</h3> 
      <p>Whatnot.</p> 
     </div> 
     <div id="sidebar2"></div> 
    </div> 
</body>

Obserwuje tym stylu:

/* ~~ this fixed width container surrounds all other divs~~ */ 
#container { 
    width: 960px; 
    background-color: #FFF; 
    margin: 0 auto; 
    overflow: hidden; 
} 
#sidebar1 { 
    float: left; 
    width: 180px; 
    /*border: 2px solid black;*/ 
    background-color: #EADCAE; 
    padding: 0px 0px 100% 0px; 
} 
#content { 
    padding: 10px 0; 
    width: 600px; 
    float: left; 
} 
#sidebar2 { 
    float: left; 
    width: 180px; 
    /*border: 2px solid black;*/ 
    background-color: #EADCAE; 
    padding: 0px 0px 100% 0px; 
}

staram się osiągnąć ten układ: http://jsfiddle.net/QnRe4/

Ale jak tylko un-skomentować granic go zmienia się w: http://jsfiddle.net/FZxPQ/

** Rozwiązany **

Szerokość krawędzi została dodana do całkowitej szerokości każdego elementu, dzięki czemu są zbyt szerokie, aby zmieściły się w pojemniku. Usunięcie 2x szerokości ramki z szerokości każdej kolumny rozwiązuje problem: http://jsfiddle.net/FZxPQ/4/

Źródło

2013-05-24 Pi_

Problem polega na tym, że po dodaniu granicy rozmiar zewnętrznych elementów div wzrasta o 4, 2 piksele na każdy rozmiar. Twój pojemnik musi się powiększyć o 8 pikseli.

więc zmienić swój pojemnik do:

#container { 
    width: 970px; 
    background-color: #FFF; 
    margin: 0 auto; 
    overflow: hidden; 
}

Patrz: http://jsfiddle.net/QnRe4/13/

Źródło

2013-05-24 13:36:14 Tyanna

Podoba Ci się to? http://jsfiddle.net/QnRe4/3/

Co się dzieje, to że Twoje elementy tracą swoje właściwości wyświetlania po usunięciu granic.

Dodanie do tych elementów display: block rozwiązuje to.

Zmieniłem także szerokość twoich elementów o 4 piksele szerokości, aby zachować układ, ponieważ usunięcie tych obramowań zasadniczo zmniejsza przestrzeń, którą te elementy zajmują na stronie.

Źródło

2013-05-24 13:32:27 johnkavanagh

Tak. Znacznie lepsza odpowiedź niż moja. :) – Jonathan

Dzięki @ Jonathan! :) – johnkavanagh

Nie wiedziałem, że szerokość granicy została dodana do całkowitej szerokości elementu. Dziękujemy @jognkavanagh –

Po nałożeniu obramowań następuje podział elementów zewnętrznych, dzięki czemu paski boczne będą miały szerokość 184 piks., Która nie pasuje do kontenera. spróbuj addig width: 176px

http://jsfiddle.net/QnRe4/12/

#sidebar1 { 
    float: left; 
    width: 176px; 
    border: 2px solid black; 
    background-color: #EADCAE; 
    padding: 0px 0px 100% 0px; 
}

Źródło

2013-05-24 13:32:59 Seer

Kolejne rozwiązanie, jeśli dodasz właściwość 'box-sizing' do twoich pasków bocznych: [przeczytaj więcej o tym tutaj] (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp) – Seer

Dziękujemy @Seer –

CSS box-sizing na ratunek! Ta nieruchomość

zmienia domyślny model blokowy CSS używany do obliczania szerokości i wysokości elementów

Wartość border-box oznacza, że

właściwości width i height zawierają dopełnienie i obramowanie

/* support Firefox, WebKit, Opera and IE8+ */ 
#container, #sidebar1, #sidebar2 { 
     box-sizing: border-box; 
    -moz-box-sizing: border-box; 
}

Jednak browser support nie jest w 100% ustandaryzowany.

W innych odpowiedziach już wspomniano o dodatkowej szerokości, która wypycha paski boczne poza wyrównanie, ponieważ obliczenie szerokości obejmuje szerokość obramowania . box-sizing po prostu informuje przeglądarkę, że element o podanej szerokości/wysokości powinien zawierać wszelkie wartości obramowania i wypełnienia do końcowych obliczeń szerokości/wysokości.

Źródło

2013-05-24 13:34:58 andyb

The wadą tego podejścia jest kompatybilność z przeglądarką. Powyższy kod będzie działać w niektórych nowoczesnych przeglądarkach, ale realistycznie musisz użyć prefiksów sprzedawca, aby uwzględnić wszystkie obecne przeglądarki. Nawet najnowszy FireFox wciąż potrzebuje -moz. (Źródło: http://css-tricks.com/box-sizing/). – johnkavanagh

jest to prawdopodobnie odpowiedź, której szuka OP. @johnkavanagh - przedrostki dostawcy nie są końcem świata, a poza tym zgodność z przeglądarką jest w porządku, chyba że masz zamiar obsługiwać IE6/IE7 (naaah ...;)). – Spudley

Dla mnie 'box-sizing' działa we wszystkich przeglądarkach. Wystarczy dodać prefiks dostawcy dla Firefoksa, który nie jest taki zły. Mój limit to IE8, nie przejmuj się starszą przeglądarką. – pzin

Innym rozwiązaniem bez zmiany szerokości kontenera;

click here

Źródło

2013-05-24 14:01:06

Jak dodać ramki do elementu div bez komplikowania układu?

Odpowiedz

Powiązane problemy