html - パディングを設定すると、divが別のdivに展開されます

Question

div .detalhes のパディングを設定すると、.detalhes ボックスが div .seta の上に展開されます。見てみましょう: http://jsfiddle.net/XdfCp/

これを解決するにはどうすればよいですか? 私のdetalhes divの幅は100％です。必要な幅を計算するためにパディングを考慮してほしい。

score 2 · Accepted Answer

幅を削除し、div をフロートしないでください。http://jsfiddle.net/XdfCp/3/

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

CSS を学習している場合は、float がどのように機能するかを理解するのに少し時間をかけ、代替手段がある場合はそれらを避けるようにしてください。何かを「修正」するために要素を単にフロートしないでください。厄介な結果が生じる可能性があります。

score 1 · Accepted Answer

これは、パディングを追加した要素の幅が 100% に設定されているためです。これは、パディングがこれに追加され、要素が .seta に拡張されることを意味します。

最善の策は、幅を変更し、パディングを % に設定して、 width:90%; のようにすることです。パディング: 5% または最大幅を設定します。

2 に答える 2