が動的に境界線を追加すると、私は次のようになりた、正方形のグリッドを作成してい要素

Question

シフト：

を私は特定のボックスをクリックしたときに、それが強調表示されますことを、機能を追加しました。だから、動的にクラスを追加すると、選択したボックスにボーダー機能が追加されます。ただし、ボックスは右に移動します（ボックスをクリックすると表示されます）。

なぜそれはそうでしょうか？ 以下は私のCSSコードと指示コードです。次のように私のディレクティブの

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

テンプレートは次のとおりです。

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

どのように私は私のボックスが右側にシフトしていないことを、私のCSSやテンプレートを変更することができます。

Answer 1

あなたは余裕、そのはそれ周りのコンテナに影響を与えるとフロートスタイルを変更を追加しているとき、それはあなたのためfloat:leftのです。 平方クラスでfloat:leftの代わりにdisplay:inline-blockを使用すると問題なく動作します。

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>