CSS Grenzen Probleme

Ich versuche gerade, ein Quadrat mit 4 kleinen Quadraten innerhalb zu machen, und ich habe Probleme mit einer Art, die ich versuchte zu tun. Das ist also der Code:CSS Grenzen Probleme

border: 2px solid black

Aber wenn ich es tue, dass die Boxen nur aus der Pause:

#grandbox { 
 
    position: absolute; 
 
    width: 204px; 
 
    height: 204px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
</div>

ich die CSS-Stil der Grenzen machen wollte größere Box und sind vertikal angezeigt.

Ich bin ziemlich Neuling mit diesem, wie ich gerade begann meine Karriere, aber ich kann nicht verstehen, warum es nicht funktioniert.

PS: Entschuldigung, wenn schlecht Englisch, nicht meine Muttersprache.

Quelle

2016-08-05 Yacomini

Normalerweise werden Rahmenbreiten zu der angegebenen Breite hinzugefügt. Mit der Regel box-sizing: border-box; können Sie den Rand in die Breite einbeziehen, sodass Sie keine Pause mehr haben. Sehen Sie diese Schnipsel:

#grandbox { 
 
    position: absolute; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
    box-sizing: border-box; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
    <div class="smallbox"></div> 
 
</div>

sehen https://developer.mozilla.org/de/docs/Web/CSS/box-sizing für weitere Informationen über Box-Sizing.

Quelle

2016-08-05 13:16:39 andreas

Also, ich war nicht zu sagen den Browser, wie es von der Größe? Danke für das Erklären! – Yacomini

Sie haben dem Browser nicht gesagt, dass er den Rahmen in Ihre Breitenanweisung aufnehmen soll. Deshalb waren die '.smallbox' Elemente wegen ihrer Rahmenbreite größer als 100px. – andreas

Browser verwenden _by default_ das Standard-Box-Modell. Mit 'box-sizing: border-box' sagst du, dass es zu einem äquivalenten IE6-Box-Modell wechseln soll, das sehr verachtet und _krätzlich_ viel besser ist. Sehr gute Zusammenfassung auf https://css-tricks.com/box-sizing/ (Sie brauchen keine Box-Sizing auf Pseudos IMHO aber abgesehen davon ist diese Universal Box ... genial.Sie können ein Plugin mischen, das ein anderes Boxmodell verwendet, egal welches Boxmodell Sie verwenden) – FelipeAls

Die äußere Box sollte relative und die vier inneren Boxen absolute positioniert werden. Dann müssen Sie sie nur mit leftrighttopbottom Eigenschaften positionieren.

#grandbox { 
 
    position: relative; 
 
    width: 204px; 
 
    height: 204px; 
 
    border: solid thin black; 
 
    left: 40%; 
 
    top: 8%; 
 
} 
 
div.smallbox { 
 
    border: solid thin black; 
 
    text-align: center; 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    float: left; 
 
    line-height: 100px; 
 
} 
 
div.sb1 { 
 
    top: 0; 
 
    left: 0; 
 
} 
 
div.sb2 { 
 
    top: 0; 
 
    right: 0; 
 
} 
 
div.sb3 { 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
div.sb4 { 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div id="grandbox"> 
 
    <div class="smallbox sb1"> 
 

 
    </div> 
 
    <div class="smallbox sb2"> 
 

 
    </div> 
 
    <div class="smallbox sb3"> 
 

 
    </div> 
 
    <div class="smallbox sb4"> 
 

 
    </div> 
 
</div>

Hier ist eine jsbin Version.

Quelle

2016-08-05 13:13:48

EDIT: Meine Antwort ist eher eine Hack-Lösung. Die akzeptierte Antwort oben, dass die Box-Sizing automatisch inklusive Grenzen in die Breite enthält, ist eine bessere Antwort.

In Ihrer ursprünglichen Berechnung von Höhe und Breite (204) glaube ich nicht, dass Sie beide Seiten eines jeden Quadrates als zusätzliche 4 Pixel größer betrachteten.

Die Einstellung der Breite und Höhe auf 208px sollte Ihr Problem lösen.

#grandbox 
 
    { 
 
     position: absolute; 
 
     width:208px; 
 
     height:208px; 
 
     border: 2px solid black; 
 
     left:40%; 
 
     top: 8%; 
 
    } 
 

 
div.smallbox 
 
    { 
 
     border: 2px solid black; 
 
     text-align: center; 
 
     width: 100px; 
 
     height: 100px; 
 
     float: left; 
 
     line-height: 100px; 
 

 
    }

<body> 
 
    <div id="grandbox"> 
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    
 
    <div class="smallbox"> 
 

 
    </div> 
 
    </div> 
 
</body>

Quelle

2016-08-05 13:17:11 Adam

Antwort

Verwandte Themen