Question

enter link description here我有一组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>

我想通过css手动选择每个浮点数，只为所有浮点数添加内部边框，如下所示：

 .view:nth-child(1) {
border-left:none
 }
 .view:nth-child(5) {
border-left:none
 }
 .view:nth-child(4) {
border-right:none
 }
 .view:nth-child(8) {
border-right:none
 }
 .view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(4) {
border-top:none;
 }
 .view:nth-child(5), .view:nth-child(6), .view:nth-child(7), .view:nth-child(8) {
border-bottom:none;
 }

但是不知怎的，我得到了第2，第3，第6和第7的边界漂浮都错了 - 在这里看到

jsfiddle

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％引起的。你能找到一个解决方案让我的内部边框大小相同吗？感谢

Answer 1

尝试删除所有儿童样式并应用以下

.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%;
}

CSS与浮动div相邻

1 个答案: