画面にdivを3列に、タイル状に敷き詰めたいです。
・divの横幅は均一で全て画面の3/1幅です。
・divの高さは2種類で、300pxと、600px。
600pxのdivの後ろに次のdivが回り込まず、段落ちしてしまします。
コードの、5番目と10番目の後ろです。
空白を出さず、全画面にdivを敷き詰めたいのですが、どうしたら良いでしょうか。
どなたかご教示いただけますと大変助かります...!!
よろしくお願いいたします。
html
1 section.blog.cf 2 .article_box 3 .text 4 span 1 5 p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。 6 .article_box 7 .text 8 span 2 9 p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。 10 .article_box 11 .text 12 span 3 13 p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。 14 .article_box 15 .text 16 span 4 17 p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。 18 .article_box 19 .text 20 span 5 21 p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。 22 .article_box 23 .text 24 span 6 25 p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。 26 .article_box 27 .text 28 span 7 29 p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。 30 .article_box 31 .text 32 span 8 33 p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。 34 .article_box 35 .text 36 span 9 37 p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。 38 .article_box 39 .text 40 span 10 41 p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。 42 .article_box 43 .text 44 span 11 45 p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。 46 .article_box 47 .text 48 span 12 49 p タイトルが入ります。タイトルが入ります。タイトルが入ります。タイトルが入ります。 50
css
1 2 3.blog { 4 width: 100%; 5 margin: 0; 6 font-size: 0; } 7 .blog .article_box { 8 float: left; 9 margin: 0; 10 font-size: 0; 11 display: inline-block; 12 width: calc(100% / 3); 13 height: 300px; 14 background: url("../img/test.jpg") no-repeat center center; 15 background-size: cover; } 16 .blog .article_box .text { 17 margin: 20px; } 18 .blog .article .text span { 19 font-size: 48px; } 20 .blog .article_box:first-of-type, .blog .article_box:nth-of-type(5n) { 21 height: 600px; } 22
これってただのhtmlcssじゃないですよね?(たぶんjadeとsass)。もしそうなら質問にタグを追加すると回答がつきやすいですよ。