如何collaspe邊境DIV

Question

這是我Studi住宅情況： http://codepen.io/darkiron/pen/ZORNEp

我不能在我爲例做，邊境collasped。 在這種情況下，我該如何做到這一點？

.col-md-4{ 
border: 1px solid aqua; 
/*margin: -1px;*/ 

}

Answer 1

html,body{ 
 
    background-color: #333; 
 
} 
 
.panel { 
 
    margin:auto; 
 
} 
 

 
.panel-body { 
 
    border-collapse: collapse; 
 
    table-layout: fixed; 
 
    text-align: center; 
 
    display: table; 
 
    width: 100%; 
 
    padding: 0; 
 
} 
 
.panel-body .col { 
 
    border: 1px solid aqua; 
 
    display: table-cell; 
 
    width: inherit; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="col-md-9"> 
 
    <div class="panel panel-default "> 
 
     <div class="panel-heading">test</div> 
 
     <div class="panel-body"> 
 
     <div class="col"> 
 
      content 1 
 
     </div> 
 
     <div class="col"> 
 
      content 2 
 
     </div> 
 
     <div class="col"> 
 
      content 3 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

易

.panel-body div:not(:last-child){ 
    border-right: none; 
} 

Answer 3

，所以如果你不使用表，你可以做的邊界崩潰屬性是對table元素使用元素的行爲如同table到display: table或display: inline-table。

您可以應該添加display: table; display:table-row; display:table-cell;和border-collapse: collapse;

html,body{ 
 
\t background-color: #333; 
 
} 
 
.panel{ 
 
\t margin:auto; 
 
    display:table-row; 
 

 
} 
 
.container{ 
 
    display: table; 
 
    border-collapse: collapse; 
 
    } 
 
.panel-body{ 
 
\t padding:0px; 
 
} 
 

 
.col-md-4{ 
 
    
 
    display: table-cell; 
 
\t border: 1px solid aqua; 
 
    
 
\t /*margin: -1px;*/ 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="col-md-9"> 
 
\t \t <div class="panel panel-default "> 
 
\t \t \t <div class="panel-heading">test</div> 
 
\t \t \t <div class="panel-body"> 
 
\t \t \t \t <div class="col-md-4"> 
 
\t \t \t \t \t content 1 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-4"> 
 
\t \t \t \t \t content 2 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-md-4"> 
 
\t \t \t \t \t content 3 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div>

Answer 4

該解決方案的工作都沒有！ 所有邊框需要collasping（面板太）

@Andrey Fedorov我不能有更多的div。

我可以找到它的最佳方式否定margin！ http://codepen.io/darkiron/pen/ZORNEp