面板中的未知宽度

Question

我目前正在学习HTML和CSS，并且我对特定对象的宽度有问题。

该网站可以在这里找到：https://rawgit.com/NBenitus/Diplomatie-Online/master/ordres.html

基本上，我想用标题“猛禽VS国际象棋大师”的小组，以填补图像，没有任何其他的宽度。

我已经为面板，其子项和父项分配了“display：block”（也尝试过了“display：inline-block”），但没有运气。此外，没有一个孩子或父母有固定的宽度，也没有余量或填充，我已经使用Chrome的开发工具进行了验证。

在此先感谢！

Answer 1

该代码你有没有真的很讨厌，有太多的类，ID的等

我摆弄它。也许这可以帮助。

https://jsfiddle.net/foreyez/3m89rhqh/

<div id='panel'> 
    <div id='title'>Raptor vs Chessmaster</div> 
    <img id='image1' src='https://rawgit.com/NBenitus/Diplomatie-Online/master/images/Diplomatie_Partie.png'> 
</div> 

CSS：

#panel { 
    background:white; 
    width:300px; 
    height:auto; 
    padding-bottom:30px; 

} 

#image1 { 
    width:300px;height:300px; 
    } 
#title { 
    background:#FFC0CB;width:300px;} 

body { 
    background:#ddd; 
    }