Diamant divs fit Behälter

Question

Ich habe diesen Code:

.container { 
 
    width: 100%; 
 
    margin: 30px; 
 
} 
 
.container div { 
 
    width: 100px; 
 
    height: 100px; 
 
    transform: rotate(-45deg); 
 
    background: blue; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Ich möchte diese div s, was die .container Breite passen. Ich möchte dynamische width und height zu ihnen setzen.

Danke für Ihre Hilfe!

Answer 1

Sie sollten hier einige Prozentsätze verwenden, wenn Sie eine einfache Methode wünschen. Ersetzen Sie auch den Inline-Block durch einen Float. Bemerkenswert, wenn Sie einen Schwimmer verwenden, stellen Sie sicher, dass Sie den übergeordneten Container Probleme zu vermeiden und das Layout löschen ...

css:

.container { 
    width: 100%; 
} 
.container div { 
    width: 25%; 
    transform: rotate(-45deg); 
    background: blue; 
    float: left; 
} 
.container div:before { 
    content: ""; 
    padding-top: 100%; 
    display: block; 
} 

See Example

Answer 2

CSS übernimmt die Rotation nach der Malerei Element, so können wir nicht einfach width: 25% für die Diamanten verwenden, müssen wir klüger sein.

einige Geometrie:

• Die Formel für die Breite wäre 25%/sqrt(2) (die ca. 17,677%.)

• Die Formel für die Ränder (25% - (25%/sqrt(2)))/2 wäre (was ca. 3.661. %)

sie display: inline-block hier nicht verwenden, da es eine winzige Lücke von etwa 4px zwischen Element hinzufügt s; Verwenden Sie stattdessen .

Hier sind Ihre Diamanten! (Mit this method für das Styling der div s als Quadrate)

.container { 
 
    width: 100%; 
 
    height: 180px; 
 
    background: gray; 
 
} 
 
.container div { 
 
    width: 17.677%; 
 
    padding-bottom: 17.677%; 
 
    margin: 3.661%; 
 
    transform: rotate(45deg); 
 
    background: blue; 
 
    float: left; 
 
}

<div class="container"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Ich habe eine Hintergrundfarbe hinzugefügt, so dass Sie die Größe des Behälters zu sehen. Wenn Sie auch möchten, dass die Höhe des Containers zu den Diamanten passt, habe ich eine JSFiddle gemacht, die eine kleine Änderung vornimmt.