0

次のスタックオーバーフローの質問/回答に基づいて、このフィドル ( http://jsfiddle.net/HfpHf/1/ ) を作成しました: https://stackoverflow.com/a/9236397

関連するビットは次のとおりです。

.box-parent {
width:95%;
padding-bottom:95%;
height:0;
position:relative;

}

.box {
border-radius: 10%;
width:100%; 
height:100%;
position:absolute;
left:0;
background-color:rgb(17, 17, 17);
color: #ffffff;
text-align: center;

}

問題は、それがどのように、またはなぜ機能するのか、よくわからないことです。より具体的には、親で height: 0 を設定するとどうなりますか? padding-bottom を幅と同じパーセンテージに設定すると、子が正方形になるのはなぜですか?

4

1 に答える 1

1

問題は、li要素が指定されていないことheightです。したがって、子要素はその幅によってのみ決定する必要があります。

の高さが分からないのでheight: 100%指定できません。唯一の解決策は、ここでパーセンテージ指定でわかるように、親要素の幅によってのみ運命づけられている使用です。含まれている要素の幅のパーセントでパディングを指定します。parent-boxlipadding

于 2013-07-13T17:13:59.603 に答える