html - 添加边框动态移动元素

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 样式. 您可以在 square 类 上使用 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>