Come aggiungere bordi a div senza rovinare il layout?

Ho i seguenti elementi:Come aggiungere bordi a div senza rovinare il layout?

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

Seguendo questo stile:

/* ~~ 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; 
}

io sto cercando di realizzare questo layout: http://jsfiddle.net/QnRe4/

Ma non appena ho non-commento i confini che si trasforma in: http://jsfiddle.net/FZxPQ/

** Risolto **

La larghezza del bordo è stata aggiunta alla larghezza totale di ciascun elemento rendendole troppo larghe per adattarsi al contenitore. Rimuovendo 2x la larghezza del bordo dalla larghezza di ogni colonna si risolve il problema: http://jsfiddle.net/FZxPQ/4/

fonte

2013-05-24 Pi_

Il problema è che quando aggiungi il boarder, la dimensione dei div esterni aumenta di 4, 2 pixel per ogni dimensione. Quindi, il tuo contenitore ha bisogno di crescere di dimensioni di 8px.

Quindi cambiare il vostro contenitore:

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

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

fonte

2013-05-24 13:36:14 Tyanna

Ti piace questo? http://jsfiddle.net/QnRe4/3/

Che cosa sta succedendo è che i vostri elementi perdono le loro proprietà di visualizzazione block quando si rimuovono i bordi.

Quindi, aggiungere display: block a quegli elementi lo risolve.

Ho anche regolato le larghezze dell'elemento di 4px in larghezza per mantenere il layout, poiché la rimozione di tali bordi riduce sostanzialmente lo spazio occupato da tali elementi in-page.

fonte

2013-05-24 13:32:27 johnkavanagh

Sì. Risposta molto migliore della mia. :) – Jonathan

Grazie @ Jonathan! :) – johnkavanagh

Non sapevo che la larghezza del bordo fosse stata aggiunta alla larghezza totale dell'elemento. Grazie @jognkavanagh –

Quando applicate i bordi, questo va all'esterno dei div, quindi le barre laterali avranno una larghezza di 184 px che non si adatta al contenitore. provare 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; 
}

fonte

2013-05-24 13:32:59 Seer

un'altra soluzione se aggiungi la proprietà 'dimensionamento a riquadri 'alle tue barre laterali: [leggi di più su questo qui] (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp) – Seer

Grazie @Seer –

CSS box-sizing per il salvataggio! Questa struttura

altera box model predefinito utilizzato per calcolare larghezze e altezze elementi

Il valore border-box significa che

le proprietà width e height includono l'imbottitura e confine

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

Tuttavia, browser support non è standardizzato al 100%.

Come già indicato in altre risposte, la larghezza aggiuntiva che spinge le barre laterali fuori allineamento è dovuta al fatto che il calcolo della larghezza include la larghezza del bordo . box-sizing indica semplicemente al browser che un elemento con una larghezza/altezza specifica deve includere qualsiasi valore di bordo e spaziatura nei calcoli di larghezza/altezza finali.

fonte

2013-05-24 13:34:58 andyb

Il svantaggio di questo approccio è la compatibilità del browser. Il codice sopra funzionerà su alcuni browser moderni, ma in realtà è necessario utilizzare i prefissi dei fornitori per tenere conto di tutti i browser correnti. Anche l'ultimo FireFox ha ancora bisogno di -moz. (Fonte: http://css-tricks.com/box-sizing/). – johnkavanagh

questa è probabilmente la risposta che l'OP sta cercando. @johnkavanagh - i prefissi dei venditori non sono la fine del mondo e, a parte la compatibilità del browser, va bene a meno che non si preveda di supportare IE6/IE7 (naaah ...;)). – Spudley

Per me il 'dimensionamento della scatola 'funziona in tutti i browser. Basta aggiungere il prefisso del venditore per Firefox, che non è poi così male. Il mio limite è IE8, non importa del browser più vecchio. – pzin

L'altra soluzione senza larghezza cambio contenitore;

click here

fonte

2013-05-24 14:01:06

Come aggiungere bordi a div senza rovinare il layout?

risposta

Problemi correlati