我使用浮动设置了一个包含4个块的网格。在网格项目上,我已在每个项目上应用border-top
,并在奇数项目上应用了边框。
但由于某种原因,奇数块的底部有某种边界。
出现此行为的原因以及相同的修复方法吗?
额外注意:使用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>
答案 0 :(得分:1)
因为您使用box-sizing: border-box
...添加border-right
会影响图片的宽度,进而影响身高。
如果您将border-right
添加到所有项目,则高度匹配,并且div对齐。
答案 1 :(得分:1)
这种效应的发生是因为奇数的conatainers,即(2n + 1)有边框甚至容器,即(2n)没有边框,你可以使用填充代替来解决这个问题。或给每个容器边框
.services-container {
border-right: 2px solid #fff;
}
答案 2 :(得分:1)
只需将此css属性添加到.services-container类,
即可.services-container {border-right: 2px solid transparent;}