添加边框会动态移动元素

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，它会影响它周围的容器并改变浮动风格。您可以在方形类中使用display:inline-block而不是float:left，它可以正常工作。

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>