边框没有显示在像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结构的卡片

回答

相关问题