浮动div上的CSS板

我有一套8个浮动div，每个都占25%的宽度（里面还有另一个div和img），所以它们排成两行

<div class="galleryboard" id="gallery3">
<div class="view view-first">
  <img src="img/galleries/3/thumb/1.jpg">  
    <div class="mask">
        <a href="img/galleries/3/full/1.jpg"  class="info group1">Enlarge</a>
    </div>
</div>
<div class="view view-first">
    <img src="img/galleries/3/thumb/2.jpg">
    <div class="mask">
        <a href="img/galleries/3/full/2.jpg"  class="info group1">Enlarge</a>
    </div>
</div>
<div class="view view-first">
    <img src="img/galleries/3/thumb/3.jpg">
    <div class="mask">
        <a href="img/galleries/3/full/3.jpg"  class="info group1">Enlarge</a>
    </div>
</div>
<div class="view view-first">
    <img src="img/galleries/3/thumb/4.jpg">
    <div class="mask">
        <a href="img/galleries/3/full/4.jpg"  class="info group1">Enlarge</a>
    </div>
</div>
<div class="view view-first">
    <img src="img/galleries/3/thumb/5.jpg">
    <div class="mask">
        <a href="img/galleries/3/full/5.jpg"  class="info group1">Enlarge</a>
    </div>
</div>
<div class="view view-first">
    <img src="img/galleries/3/thumb/6.jpg">
    <div class="mask">
        <a href="img/galleries/3/full/6.jpg"  class="info group1">Enlarge</a>
    </div>
</div>
<div class="view view-first">
    <img src="img/galleries/3/thumb/7.jpg">
    <div class="mask">
        <a href="img/galleries/3/full/7.jpg"  class="info group1">Enlarge</a>
    </div>
</div>
<div class="view view-first">
    <img src="img/galleries/3/thumb/8.jpg">
    <div class="mask">
        <a href="img/galleries/3/full/8.jpg"  class="info group1">Enlarge</a>
    </div>
</div>
</div>

但不知怎么的，我把第二、第三、第六和第七浮动的边界都搞错了——看这里

这些div是在这里设计的

 .view {
width: 25%;
box-sizing:border-box;
float: left;
overflow: hidden;
position: relative;
text-align: center;
 border:3px solid blue
 }
 .view .mask, .view .content {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
width:100%;
height:auto;
}

显然，这个问题是由img将其宽度设置为100%引起的。你能找到一个解决办法，让我的内边框都一样大吗？谢谢

试试看 删除所有子样式并应用以下内容

.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(5), .view:nth-child(6), .view:nth-child(7) {
   border-right: medium none;
}

.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(4) {
    border-bottom: medium none;
}

在.view中，我刚刚添加了高度或动态传递了高度

.view {
    border: 3px solid blue;
    box-sizing: border-box;
    float: left;
    **height: 240px;**
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 25%;
}

---

太好了，谢谢。我用JS设置了.view和.view img的高度，一切都符合我的口味。。。。

.view {
    border: 3px solid blue;
    box-sizing: border-box;
    float: left;
    **height: 240px;**
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 25%;
}