동일한 높이 열의 여백이 작동하지 않습니다.

Question

동일한 높이로 확장되는 3 개의 열이 있습니다. 유일한 문제는 각 열 사이에 간격이 필요하다는 것입니다.

내가 float를 배치하는 것을 시도했다 Fiddle Demo

는 (우는 소리 참조) #wrapper> .COL에 남아있는 그것은 일을하지만 그것은 열 높이를 망쳐 놨어요.

이 문제를 해결할 방법이 있습니까?

#wrapper > .col { 
    display: table-cell; 
    width: 30.3%; 
    margin: 0 15px 3px; 
    background-color: #fff; 
    text-align: center; 
    position: relative; 
    height: 100%; 
    padding-bottom: 2px; 
    border:1px solid #000; 
    float:left; 
} 

CSS

.content > img { 
    vertical-align:top; 
} 
#wrapper { 
    height: 100%; 
    width: 100%; 
    margin: 20px auto; 
    display:table; 
    overflow: hidden; 
} 
#wrapper > .col { 
    display: table-cell; 
    width: 30.3%; 
    margin: 0 15px 3px; 
    background-color: #fff; 
    text-align: center; 
    position: relative; 
    height: 100%; 
    padding-bottom: 2px; 
    border:1px solid #000; 
} 
#wrapper > .col > .content { 
    padding:0 0 35px; 
    height:100%; 
} 
.content { 
    margin-bottom:30px; 
    position: relative; 
} 
.content > p { 
    vertical-align:top; 
} 
.content h3 { 
    font-size:1.375rem; 
    font-weight:400; 
    text-align:center; 
    margin-bottom: 20px; 
    padding: 25px 27px 0; 
} 
.content p { 
    text-align:left; 
    padding: 0 27px 30px; 
} 
.button.moreinfo { 
    margin-top: 5px; 
    margin-bottom: 0; 
    padding-top: 0.5rem; 
    padding-right: 0.3rem; 
    padding-bottom: 0.5rem; 
    padding-left: 0.3rem; 
    background-color: #2a2a2a; 
    font-size: 0.9rem; 
    color: #f39c12; 
    font-weight: 400 !important; 
} 
div.btn-align-bottom { 
    position:absolute; 
    bottom:50px; 
    left:0; 
    right:0; 
} 
.info-box { 
    margin-bottom:0; 
    margin-top: 15px; 
} 
.info-box img { 
    max-width: 100%; 
    max-height: 100%; 
    vertical-align: middle; 
} 
.info-box-inner { 
    background: #FFF; 
    padding:25px 27px 35px; 
    display:inline-block; 
    overflow:hidden; 
    float:none; 
    min-height:270px; 
    text-align:center; 
    -moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3); 
    -webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3); 
    box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3); 
    z-index:1; 
} 
.info-box-inner p { 
    text-align:left; 
} 
.info-box-inner h3 { 
    font-size:1.375rem; 
    font-weight:400; 
    text-align:center; 
} 

Answer 1

테두리 - 간격 속성은 (마진 내부 테이블 개체에 적용하지 않음) 사용해야 하나입니다. 그러나 테이블에만 적용되고 셀에는 적용되지 않습니다. display 값이 table 인 조상 요소에 border-spacing을 설정해야합니다.

코드뿐만 아니라이

#wrapper{ 
border-spacing:10px; 
display:table; 
} 

#wrapper > .col { 
    display: table-cell; 
    /* margin: 0 15px 3px;*/ 
    padding:10px; 

}