fehlende Pixel css fixed div wrapper

Question

Also versuche ich divs perfekt in einen Wrapper passen mit festen Pixeln für Breite und Höhe. Obwohl ich verwirrt bin, wie die Pixel nicht richtig summieren.

HTML

<div class="div1"> 
     <img src="image.png" alt="image" class="image"> 
    </div> 

    <div class="div2"> 

    </div> 

    <div class="div3"> 

    </div> 

    <div class="div4"> 

    </div> 
</div> 

CSS

#wrapper { 
    height: 455px; 
    width: 690px; 
    background-color: grey; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 
    overflow: hidden; 
    white-space:nowrap; 
} 

.div1 { 
    display: inline-block; 
    margin-bottom: 10px; 
    vertical-align:top; 
} 

.image { 
    max-width: 172px; 
    max-height: 172px; 
    border-radius: 2%; 
    border: 4px solid blue; 
} 

.div2 { 
    height: 172px; 
    width: 277px; 
    border: 4px solid blue; 
    display: inline-block; 
    margin-left: 30px; 
    background-color: purple; 
} 

.div3 { 
    width: 159px; 
    height: 188px; 
    display: inline-block; 
    margin-left: 30px; 
    border-left: 4px solid blue; 
    border-right: 2px solid blue; 
    border-top: 2px solid blue; 
    vertical-align: top; 
    background-color: purple; 
} 

.div4 { 
    background: url(image.png) no-repeat center; 
    background-size: cover; 
    width: 690px; 
    height: 265px; 
} 

Wenn das übergeordnete div ist 690px breit, warum kann das Kind nicht divs mit berechneten Breiten bis 690 addieren, Marge und Boarder .

(div1) 180 + 30 + (div2) 285 + 30 + (div3) 165 = 690px

Wenn Sie bei div aussehen 3, es ist richtig Grenze nicht zu sehen ist. Sie müssen die Breite um 7px reduzieren, um es zu sehen.

Dies geschieht auch vertikal mit einer 190px div3 Höhe, die div4 genau berühren soll, aber um 4px aus ist.

Ist dies ein Browserproblem? Default Alignment-Probleme, die mir nicht bekannt sind? Ich bin wirklich neugierig zu wissen, warum das passiert!

Jede Rückmeldung wäre willkommen. :)

Answer 1

Wenn Sie setzen Kommentare wie diese in Ihrer HTML können Sie die oben beheben, aber für das Bild in der 2. Zeile Ich weiß nicht, noch weiter ich

OK versucht, so habe ich die erste Zeile setzen in einem div „test“ und gaved ihm Anzeige: Block und Überlauf versteckte unter den den Raum zu nehmen und dann habe ich den div1 feste Höhe und Breite 180px (Bild + Rand)

#wrapper { 
 
    height: 455px; 
 
    width: 690px; 
 
    background-color: grey; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    margin-top: 10px; 
 
    overflow: hidden; 
 
    
 
} 
 

 
.test{ 
 
    display:block; 
 
    overflow: hidden; 
 
} 
 
.div1 { 
 
    height:180px; 
 
    width:180px; 
 

 
    display: inline-block; 
 
    margin-bottom: 10px; 
 
    vertical-align:top; 
 
     
 
} 
 

 
.image { 
 
    max-width: 172px; 
 
    max-height: 172px; 
 
    border-radius: 2%; 
 
    border: 4px solid blue; 
 
} 
 

 
.div2 { 
 
    height: 172px; 
 
    width: 277px; 
 
    border: 4px solid blue; 
 
    display: inline-block; 
 
    margin-left: 30px; 
 
    background-color: purple; 
 
} 
 

 
.div3 { 
 
    width: 159px; 
 
    height: 188px; 
 
    display: inline-block; 
 
    margin-left: 30px; 
 
    border-left: 4px solid blue; 
 
    border-right: 2px solid blue; 
 
    border-top: 2px solid blue; 
 
    vertical-align: top; 
 
    background-color: purple; 
 
} 
 

 
.div4 { 
 
    background: url('http://lorempixel.com/690/265/cats') no-repeat center; 
 
    background-size: contain; 
 
    width: 690px; 
 
    height: 265px; 
 
    display:block; 
 
     overflow: hidden; 
 
} 
 

 

<div id="wrapper"> 
 
    <div class="test"> 
 
    
 
    
 
    <div class="div1"> 
 

 
    <img src="http://lorempixel.com/172/172/cats" alt="image" class="image"> 
 

 
    </div><!-- 
 

 
    --><div class="div2"> 
 

 
    </div><!-- 
 

 
    --><div class="div3"> 
 

 
    </div><!-- 
 

 
    --> </div><div class="div4"> 
 

 
     </div> 
 
    </div>

geben

Answer 2

haben Sie Box-Sizing-Funktion ausgecheckt? Hier sind einige Links, die hilfreich sein könnten.

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing