実現される九公歌効果のイメージは次のとおりです:
公開スタイル:
div{
width: 300px;
height: 300px;
}
ul{
padding: 0;
width: 100%;
height: 100%;
}
li{
list-style: none;
text-align: center;
line-height: 100px;
margin: 3px;
background-color: #243F49;
color: white;
border: 1px solid white;
font-weight: bolder;
}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
1. グリッドグリッドレイアウト
Grid-template-columns は各列の幅を定義するために使用されます。grid-template-rows は各行の高さを定義するために使用されます。grid-gap はグリッドの行間隔と列間隔を設定します。
ul{
padding: 0;
width: 100%;
height: 100%;
/*设置为grid网格布局*/
display: grid;
/*设置三行高度都为100px；*/
grid-template-rows:100px 100px 100px ;
/*设置三行宽度都为100px；*/
grid-template-columns: 100px 100px 100px;
置网格的行间距、列间距都为3px
/*grid-gap: 3px;*/
}
2.フレックスレイアウト
各 li の幅と高さを計算します。幅と高さの合計は 300px です。すると、各 li の幅と高さは 300px/3=100px になります。ただし、各 li には 3px のマージンがあるため、各 li の幅 = 100px
- (margin-left + marginr-right) = 100 - (3+3) = 94px 各 li の幅を 94px に設定します。
各 li の高さ = 100px - (margin-top + margin-bottom) = 100-6 = 94px 各 li の高さを 94px に設定するだけです。
div の合計の幅と高さ、および各 li の幅と高さを決定したら、flex レイアウトを使用して行を折り返します。
もちろん、3 つのボックスの高さ (幅 * 3 + 間隔 * 2 * 3 = 合計幅/高さ) を決定する方が高速です。
ul{
padding: 0;
width: 100%;
height: 100%;
/*设置布局方式为flex布局*/
display: flex;
/*换行*/
flex-wrap: wrap;
}
li{
/*固定设置每个li的宽度和高度*/
width: 94px;
height: 94px;
margin: 3px;
list-style: none;
text-align: center;
line-height: 100px;
background-color: #243F49;
color: white;
border: 1px solid white;
font-weight: bolder;
}
3.float フローティング位置決め
合計 div の固定幅と高さを設定し、計算します高さと幅の合計 = 3 つのボックス3 + 間隔2 * 3 次に、各 li の固定幅と高さを設定し、float を使用してラップします。を選択し、親要素のオーバーフロー: 非表示のフローティング位置をクリアします。
各 li の幅と高さは 94px、マージンは 3px、div=94 3+3 2*3=300px の高さと幅の合計です。
ul{
padding: 0;
width: 100%;
height: 100%;
/*清除浮动*/
overflow: hidden;
}
li{
/*固定设置每个li的宽度和高度*/
width: 94px;
height: 94px;
/*第三种方法：浮动定位进行换行*/
float: left;
margin: 3px;
list-style: none;
text-align: center;
line-height: 100px;
background-color: #243F49;
color: white;
font-weight: bolder;
}
4.インラインブロック+文字間隔プロパティ/フォントサイズ：0
前の 2 つと同様に、最初に幅と高さを計算し、各 li の幅と高さを設定してから、display: inline-block を使用して li をラップし、次に、letter-spacing 属性の負の値を使用して間隔を縮小します。文字間のスペース
文字間隔プロパティは、文字間隔 (文字間のスペース) を増加 (値は正) または減少 (値は負) します。
ul{
padding: 0;
width: 100%;
height: 100%;
/*减少字符间的空白*/
letter-spacing: -5px;/*这里使用font-size:0;也可*/
}
li{
/*设置每个li的固定宽度和高度*/
width: 94px;
height: 94px;
display: inline-block;
margin: 3px;
list-style: none;
text-align: center;
line-height: 100px;
background-color: #243F49;
color: white;
font-weight: bolder;
}
5.テーブルレイアウト
親要素を「表示: テーブル レイアウト」に設定して、要素が表の形式で表示されるようにし、セルの境界線の間隔を設定します。次に、対応するテーブルの行フォーム表示: table-row; およびセル フォーム表示: table-cell を設定します。
<style>
ul{
width: 300px;
height: 300px;
/*元素作为块级表格来显示 padding失效*/
display: table;
/*设置相邻单元格的边框间距*/
border-spacing: 5px;
}
li{
list-style: none;
text-align: center;
background-color: #243F49;
color: white;
font-weight: bolder;
/*此元素会作为一个表格行来显示 margin和padding都失效*/
display: table-row;
}
div{
line-height: 90px;
text-align: center;
/*元素以单元格形式来显示 Margin失效*/
display: table-cell;
}
<ul>
<li>
<div>1</div>
<div>2</div>
<div>3</div>
</li>
<li>
<div>4</div>
<div>5</div>
<div>6</div>
</li>
<li>
<div>7</div>
<div>8</div>
<div>9</div>
</li>
</ul>
レンダリング:
