增加边框宽度时,如何防止相邻元素移动? [英] 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屋!