增加边框宽度时，如何防止相邻元素移动? [英] How to prevent adjoining elements from moving when increasing border width?

问题描述

我有一个由盒子组成的简单布局.

I have a simply layout that consists of boxes.

 .action_box {
   width: 300px;
   height: 200px;
   border: 1px solid black;
   float: left;
   margin-left: 10px;
   margin-top: 10px;
 }
 .action_box p {
   border: 1px solid black;
   margin-top: 0px;
   text-align: center;
 }
 .action_box:hover {
   border: 2px solid black;
   cursor: pointer;
 }

<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>

当悬停在一个框上时，我希望它具有更大的边框.实际上它可以工作，但是所有其他工具箱都已移开并破坏了该网站.如何防止这种行为?添加填充不能达到这个目的.

When hovering about one box I want it to get a broader border. Actually it works, but all other boxes are moving away and destroying the website. How can I prevent such behavior? Adding a padding does not achieve this goal.

我阅读了

I read this post and the only possible solution would be to use position: absolute;. I'd need to assign individual parameters to each box. Isn't there an easier way, but I would like to use only one class.

推荐答案

实际上很容易做到.如果您不想走绝对位置路线，则可以采用两种方法:如果您不介意

Pretty easy to do actually. If you don't want to go the absolute position route, you can do it two ways: substitute a box-shadow the increased border if your don't mind the compatibility compromise or use box-sizing:border-box. The only problem with box-sizing:border-box is that it shifts your content inward (the style rule calculates the total width + padding + border-width in the width attribute. If you set a 5px border to a 100px box, the width is normally 110px to include both left and right borders. With the box-sizing attribute it calculates the border width into the width making it 90px wide instead to allow for the 10px of border width).

j08691已经在其答案中提供了框调整大小的解决方案，因此这里是box-shadow方法(注意，我只添加了1px的框阴影.这是因为仍然存在边框，提供了所需宽度的一半):

j08691 already has the box-sizing solution in his answer, so here is the box-shadow method (notice that I only added 1px of box shadow. This is because the border is still present providing half of the desired width):

 .action_box {
   width: 300px;
   height: 200px;
   border: 1px solid black;
   float: left;
   margin-left: 10px;
   margin-top: 10px;
 }
 .action_box p {
   border: 1px solid black;
   margin-top: 0px;
   text-align: center;
 }
 .action_box:hover {
   box-shadow: 0 0 0 1px black;
   cursor: pointer;
 }

<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>

但是，如果您都不希望使用这两种方法，那么仍然可以使用 position:absolute 解决方案.对于这种方法，您不需要其他类或类似的东西.您可以改用伪元素.对于您所需要的来说，这可能是多余的，但仍然是一种选择.

If, however, you want neither of these approaches, there is still the position:absolute solution. For this method, you don't need another class or anything like that. You can use a pseudo-element instead. This is probably overkill for what you need, but it is still an option.

 .action_box {
   width: 300px;
   height: 200px;
   border: 1px solid black;
   float: left;
   margin-left: 10px;
   margin-top: 10px;
   position: relative; /* give it some context */
 }
 .action_box p {
   border: 1px solid black;
   margin-top: 0px;
   text-align: center;
 }
 .action_box:hover:after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border: 2px solid black;
   cursor: pointer;
 }

<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>
<div class="action_box">asdasds</div>

这篇关于增加边框宽度时，如何防止相邻元素移动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！