だから私はこれらのグリッドを作ろうとしています、そしてそれは収まるはずです。
- コンテンツ = 幅 960px
- グリッド1 = 300px
960/3 = 3 残り 60px。そのため、それぞれに 10px の余白を追加し、それぞれの間に 20px の余白を作成して、60px の余白にしました。
まあ、それは行ごとに3列を作っているわけではありません。見て:
コード - CSS
.grid1, .grid2, .grid3 {
float: left;
margin: 10px;}
.grid1 {width:300px;}
だから私は見るために幅を250pxにしました、そして今見てください:
そのため、ロゴが下に伸びているように見えます (ロゴは h1 です)。
ロゴコード - CSS
h1 { font-size: 48px; }
.orangeText {
color: #d5a72b;
}
.bigShadow { text-shadow: 1px 1px 3px #000; }
.logo { float: left; }