我使用浮标设置了一个包含 4 个方 block 的网格。在网格项上,我在每个项上应用了 border-top
,在奇数项上应用了 border-right。
但由于某种原因,奇数 block 的底部有某种边框。
此行为的任何原因以及相同的任何修复?
补充说明:当我使用 flexbox 设置网格时,不会出现此问题。
Codepen 链接:https://codepen.io/vikrantnegi007/full/NXKjOb/
.main-container6 {
float: left;
width: 100%;
}
.services-container {
float: left;
width: 50%;
position: relative;
border-top: 2px solid #fff;
}
.services-text-left {
text-align: left;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
color: #ffffff;
background: rgba(109, 109, 109, .75);
-webkit-transition: all .35s;
transition: all .35s;
z-index: 99;
width: 100%;
}
.services-container img {
display: block;
width: 100%;
}
.services-text-in {
padding: 60px;
}
.services-container:nth-child(2n+1) {
border-right: 2px solid #fff;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="main-container6">
<div class="services-container">
<img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000
">
<div class="services-text-left bg-color">
<div class="services-text-in">
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
<div class="services-container">
<img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000
">
<div class="services-text-left bg-color">
<div class="services-text-in">
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
<div class="services-container">
<img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000
">
<div class="services-text-left bg-color">
<div class="services-text-in">
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
<div class="services-container">
<img alt="web-development" class="img-gray-scale" src="https://picsum.photos/1000
">
<div class="services-text-left bg-color">
<div class="services-text-in">
<h3>Lorem ipsum</h3>
<ul>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</div>
</div>
</div>
</section>
最佳答案
因为您正在使用 box-sizing: border-box
...添加 border-right
会影响图像的宽度,进而影响高度。
如果您将 border-right
添加到所有项,则高度匹配,并且 div 对齐。
关于html - 为什么即使未应用边框底部也会出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47749911/