奇怪的CSS表格

我想要使用CSS表格方法獲得兩列內容相同的高度。但是，由於某些原因，第一列在底部有額外的填充，第二列在頂部有額外的填充。奇怪的CSS表格

我使用的是相同的代碼，我通常會在檢查代碼時找不到問題的根源。我仔細檢查了我的代碼並查看了其他示例，但找不到此問題的原因。

我使用的代碼是：

.archive-post{ 
    display:table; 
    vertical-align: top; 
    padding:20px 0px;} 

.archive-post .left-column{ 
    display:table-cell; 
    width:60%;} 

.archive-post .right-column{ 
    display:table-cell; 
    width:40%; 
    padding-left:20px;}

或者，你可以看到一個活鏈接here.

來源

2015-07-20 CharlyAnderson

請您可以包括所有相關的代碼來重現問題在你的問題。鏈接不適合，因爲如果問題解決/問題得到解決，該問題對其他用戶來說沒有多大價值。 –

使用vertical align

.archive-post .left-column, 
.archive-post .right-column { 
     vertical-align: top; 
}

這應該給的伎倆。

來源

2015-07-20 09:01:19

只是一個小想法..你試過flexbox，對嗎？這真的是一個簡單而簡單的方法。另外你可以使用position：absolute;列內（display:table和display:table-cell不允許）。

* { 
 
    box-sizing: border-box; 
 
    line-height: 2; 
 
} 
 
main { 
 
    display: -webkit-flex; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    padding: 1.25em 0em; 
 
} 
 
section { 
 
    background-color: #ccc; 
 
    -webkit-flex: 1; 
 
     -ms-flex: 1; 
 
      flex: 1; 
 
} 
 
aside { 
 
    background-color: #ccc; 
 
    margin-left: 20px; 
 
    width: 40%; 
 
}

<main> 
 
    <section> 
 
    left column.<br>higher then the other 
 
    </section> 
 
    <aside> 
 
    right column 
 
    </aside> 
 
</main>

來源

2015-07-20 09:24:25

奇怪的CSS表格

回答

相關問題