邊框沒有顯示在像div結構的卡片

由於某種原因，即使我使用相同顏色的外部boder和內部邊框，內部邊框不顯示。任何人都可以幫助我展示內部和外部的邊界嗎？ PS：我試着改變顏色，但沒有奏效。邊框沒有顯示在像div結構的卡片

<div id="card"> 

    <div style="display: table; height: 300px; width: 200px; padding: 0px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.121569); font-size: 16px; text-align: center; background-color: rgb(255, 255, 255);"> 
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Header</div> 
    <div style="display: table-row; padding: 20px;">Body</div> 
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Footer</div> 
    </div> 
</div>

的jsfiddle： https://jsfiddle.net/24qLhtto/1/

來源

2017-08-03 Dumitru Daniel

<div id="card"> 
 

 
    <div style="display: table; border-collapse: collapse; height: 300px; width: 200px; padding: 0px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.121569); font-size: 16px; text-align: center; background-color: rgb(255, 255, 255);"> 
 
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Header</div> 
 
    <div style="display: table-row; padding: 20px;">Body</div> 
 
    <div style="display: table-row;z-index:10; height: 24px; padding: 12px 20px; border: 1px solid red; background-color: rgb(247, 247, 249);">Footer</div> 
 
    </div> 
 
</div>

在這裏你去：

https://jsfiddle.net/24qLhtto/2/

你需要做的全部是將 border-collapse: collapse; 添加到您的父div。如果你有display: table;，你必須特別注意表格的邊界。

希望這會有所幫助！

來源

2017-08-03 07:48:32

謝謝您的回答！你還可以幫我建立邊界嗎？它沒有顯示。 –

@DumitruDaniel看看[This]（https://stackoverflow.com/a/5257130/7654934）的答案。希望這會有所幫助，我也可以要求您將此答案upvote並標記爲Accepted，以便未來的訪問者可以方便快捷地解決他們的問題？謝謝！ –

在我的情況下，我沒有顯示的子div：table-row div :(這是否意味着我需要添加另一個包含三個div的顯示器：table-row？ –

試試這個

<div id="card"> 

    <div style="display: table; height: 300px; width: 200px; padding: 0px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.121569); font-size: 16px; text-align: center; background-color: rgb(255, 255, 255);border-collapse: collapse"> 
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Header</div> 
    <div style="display: table-row; padding: 20px;">Body</div> 
    <div style="display: table-row; height: 24px; padding: 12px 20px; border: 1px solid rgba(0, 0, 0, 0.121569); background-color: rgb(247, 247, 249);">Footer</div> 
    </div> 
</div>

添加border-collapse: collapse到display: table

DEMO

來源

2017-08-03 07:49:19 Amal

我改變了我看待這個問題的方式，因爲我遇到了以下問題： -don」 t使用display:table，display: row。如果這樣做，邊框將無法正確顯示，除非您還使用border-collapse: collapse，在這種情況下邊框半徑不起作用。我用display:flex代替。

https://codepen.io/dumitrudan608/pen/eEdPVG

來源

2017-08-03 07:59:40

邊框沒有顯示在像div結構的卡片

回答

相關問題