Question

你走了：

<div id="weapons_main">
  <div class="col1">.</div>
  <div class="col1">.</div>
  <div class="clear"></div>
  <div>1</div>
  <div>2</div>
</div>

CSS：

#weapons_main{
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: thin solid #869BBF;
    border-collapse: collapse;
    margin: 0 auto;
    width: 80%;
}

#weapons_main div{
    background-color: #EFF0FB;
    border: solid 5px red;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}
#weapons_main .col1{
    width: 50%;
    float: left;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}

http://jsfiddle.net/T3v9u/

立即看到问题：红线比它们应该更厚，因为浏览器总结它们而不是合并它们。如何躲闪它？

Answer 1

您可以使用:last-child和相邻的兄弟选择器（+）

#weapons_main div:last-child {
    border-top: 0;
}


#weapons_main .col1 + .col1 {
    border-left: 0;
}

DEMO

有关更高级的示例，您可以使用:nth-child

#weapons_main .col1:nth-child(2n) {
    border-left: 0;
}

DEMO

Answer 2

要支持IE8，您需要使用:first-child

样品：

#weapons_main div:first-child {
    border-bottom: 0;
}

Answer 3

试试这个：

#weapons_main
{
    -moz-box-sizing: border-box;
    background-color: #FFFFFF;
    border: thin solid #869BBF;
    border-collapse: collapse;
    margin: 0 auto;
    padding: 0;
    width: 80%;
}

#weapons_main div
{
    background-color: #EFF0FB;
    border-top: solid 5px red;
    border-left: solid 5px red;
    border-right: solid 5px red;
    border-bottom: none;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}
#weapons_main div:last-child
{
    border-bottom: solid 5px red;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}
#weapons_main .col1
{
    border-bottom: solid 5px red;
    width: 50%;
    float: left;
    display: inline-block;
    margin: 0;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    border-collapse: collapse;
}

链接：http://jsfiddle.net/7Yw4C/

#weapons_main .col1:first-child
{
    border-right: none;
}

#weapons_main .col1:last-child
{
    border-left: none;
}

附加：http://jsfiddle.net/7Yw4C/1/

Answer 4

您可以使用此方法：

display: table;

表示容器和

display: table-row;

用于保存行内容和

的div

display: table-cell

表示细胞分裂

合并DIV之间的边界

4 个答案: