2

<li>複数の要素をインラインで含む単純な HTML レイアウトが必要で、それぞれにheight:100%

これを実現するために、次の CSS トリックを使用しました。

position:absolute;
top:0;
bottom:0;

例については、私の JSFiddle を参照してください。

この質問の範囲外の理由により、<li>要素を絶対に配置したくありません。position:relative;またはposition:static; <li>要素を使用してこの同じレイアウトを実現する方法について、誰かが協力できますか?

4

1 に答える 1

1

このjsFiddle の例を試してください。

<li>要素は左にフロートされ、ルールを使用してdisplay:inline-block適切な高さと幅を取得します。フローティングはまた、ルールの必要性を取り除きます。li.one { left:0; } li.two { left:33%; } li.three { left:66%; }

html, body {
    height:100%;
    margin:0;
    padding:0;
}
ul {
    /* width:100%; */
    /* height:500px; */
    margin:0;
    padding:0;
    list-style:none;
    height:100%;
}
li {
    display:inline-block;
    height:100%;
    background:#333;
    color:white;
    width:33%;
    float:left;
}
li:nth-child(even) {
    background:#666;
}
于 2013-05-17T01:33:41.133 に答える