html - 设置填充时，div 在另一个 div 上展开

Question

当我为 div .detalhes 设置填充时，.detalhes 框会在 div .seta 上展开。看看：http: //jsfiddle.net/XdfCp/

我能做些什么来解决这个问题？我的 detalhes div 的 witdh 为 100%。我希望它考虑填充来计算所需的宽度。

score 2 · Accepted Answer

删除宽度，不要浮动 div。http://jsfiddle.net/XdfCp/3/

#ListaEventosPorMes .detalhes{
    display: block; 
    background-color: #722827;          
    text-align: left;
    padding: 10px;
}

如果您正在学习 CSS，请花一些时间了解浮点数的工作原理，并在有替代方案时尽量避免使用它们。不要只是浮动一个元素来“修复”某些东西，它可能会产生令人讨厌的后果。

score 1 · Accepted Answer

这是因为您添加了填充的元素的宽度设置为 100%，这意味着填充将被添加到此元素上，这将在 .seta 上扩展元素。

最好的办法是改变你的宽度并将填充设置为 % 所以像 width:90%; padding: 5% 或设置最大宽度。

像这样的东西：http: //jsfiddle.net/XdfCp/2/

2 回答 2