Question

我在设计嵌套DIV（see here for an example）时遇到了问题。

我有一些动态渲染的嵌套DIV（class="box"），例如：

<div class="box" id="1">
  other content
  <div class="box" id="2">
    <div class="box" id="3">
    </div>
  </div>
  other content
  <div class="box" id="4">
  </div>
</div>
other content

我希望这些DIV在底部有一个边框：

<style>
div.box {border-bottom: solid 1px gray;}
</style>

问题是，当两个嵌套DIV的底部边框相邻时（例如框2和3或框1和4），则结果是高度为2（或更多像素）的灰线。

是否可以折叠嵌套DIV的边框（如果它们相邻？

）

我尝试添加border-collapse: collapse，但这没有用。

Answer 1

border-collapse属性仅适用于 table 和 inline-table 元素。

尝试将margin-bottom属性添加到带有负值的.box元素，以重叠边框，如下所示：

<强> Example Here

div.box {
    border-bottom: solid 1px gray;
    margin-bottom: -1px;
}

Answer 2

边界崩溃不起作用，我让它与你的JsFiddle合作，但你可能不得不改变它，因为你的动态创建了DIV。

div.box > div.box {
    border-bottom: solid 1px gray;
}

div.box > div.box > div.box:last-child {
    border-bottom: none;
}

Answer 3

css属性border-collapse仅适用于表格...

如果你正在使用div，那么你可以使用css3的:last-child选择器到最后一个.box元素的desable border

e.g。

box .box:last-child{border:none;}

Answer 4

有很多方法可以做到这一点：

1）让你的div表现得像table \ table-cell元素。

HTML 的

<div class="wrapper2">
    <div class="row"></div>
    <div class="row"></div>
</div>

SCSS

.wrapper2 {
    display: table; border-collapse: collapse; margin-bottom: 15px;
    .row {
        width: 200px; height: 100px; background: green; border: 1px solid red; display: table-cell;    
    }
}

2）只需选择您需要的div并从一侧删除边框

HTML 的

<div class="wrapper">
    <div class="row"></div>
    <div class="row"></div>
    <div class="clearfix"></div>
</div>

SCSS

.wrapper {
    width: 404px; margin-bottom: 15px;
    .row {
        width: 200px; height: 100px; background: green; border: 1px solid red; float: right;
        &:first-child { border-left: 0; }
    }
    .clearfix { clear: both; }
}

3）重叠div

HTML 的

<div class="wrapper3">
    <div class="row"></div>
    <div class="row move-left"></div>
    <div class="clearfix"></div>
</div>

SCSS

.wrapper3 {
    width: 404px; margin-bottom: 15px;
    .row {
        position: relative; width: 200px; height: 100px; background: green; border: 1px solid red; float: left;
        &.move-left { left: -1px }
    }
    .clearfix { clear: both; }
}

jsfiddle

上的所有3个示例

选择适合您项目的东西

折叠嵌套DIV的边框

4 个答案: