Hinzufügen Grenze verschiebt sich dynamisch die Elemente

Question

Ich bin ein Raster von Quadraten zu schaffen, die wie folgt aussehen:

ich die Funktionalität hinzugefügt haben, dass, wenn ich ein bestimmtes Feld klicken, wird es hervorgehoben. Also füge ich dynamisch eine Klasse hinzu, die der ausgewählten Box die Rahmenfunktionalität hinzufügt. Meine Boxen verschieben sich jedoch nach rechts, wie man sehen kann (wenn ich irgendeine Box anklicke).

Warum ist es so? Unten sind mein CSS-Code und Anweisungscode.

body { padding-top:30px; } 

.square { 
    float:left; 
    position: relative; 
    width: 20%; 
    padding-bottom : 10%; /* = width for a 1:1 aspect ratio */ 
    margin:1.66%; 
    /*background-color:#1E1E1E;*/ 
    background-color:RED; 
    overflow:hidden; 
} 

.content { 
    position:absolute; 
    height:90%; /* = 100% - 2*5% padding */ 
    width:90%; /* = 100% - 2*5% padding */ 
    padding: 5%; 

} 

.higlight { 
    border-width: small; 
    border-style: dashed; 
    border-color: black; 
    /*border-color: #0001fe;*/ 
}; 

Vorlage für meine Richtlinie lautet wie folgt:

template : '<div class="square" ng-class="{higlight: $id === active}" ng-style="{{data.color}}" ng-click="active = $id" ng-transclude> <div class="content"> </div> </div>' 

Wie kann ich meine CSS oder Vorlage ändern, dass meine Boxen nicht verschieben auf der rechten Seite.

Answer 1

Es ist wegen Ihrer float:left, wenn Sie eine Marge sind das Hinzufügen, seine die Behälter zu beeinflussen um es und den Schwimmer Stil zu ändern. Sie können display:inline-block statt float:left auf der Quadratklasse verwenden und es wird gut funktionieren.

body { padding-top:30px; } 
 

 
.square { 
 
    display:inline-block; 
 
    position: relative; 
 
    width: 20%; 
 
    padding-bottom : 10%; /* = width for a 1:1 aspect ratio */ 
 
    margin:1.66%; 
 
    /*background-color:#1E1E1E;*/ 
 
    background-color:RED; 
 
    overflow:hidden; 
 
} 
 

 
.content { 
 
    position:absolute; 
 
    height:90%; /* = 100% - 2*5% padding */ 
 
    width:90%; /* = 100% - 2*5% padding */ 
 
    padding: 5%; 
 

 
} 
 

 
.square:hover { 
 
    border-width: 2px; 
 
    border-style: dashed; 
 
    border-color: black; 
 
    margin-top:-2px; 
 
    /*border-color: #0001fe;*/ 
 
};

<div class="content"> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
<div class="square"></div> 
 
</div>