質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

5044閲覧

floatで、高さの違う二種類のカードをタイル状に敷き詰めたいが、カラム落ちしてします。

rieley

総合スコア6

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/06/10 08:58

編集2022/01/12 10:55

画面に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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

fwasome

2018/06/10 10:20

これってただのhtmlcssじゃないですよね?(たぶんjadeとsass)。もしそうなら質問にタグを追加すると回答がつきやすいですよ。
guest

回答1

0

float ではできないので、column-count を使うことになるかと思います。
CSS 段組みレイアウトの使用
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_multi-column_layouts

この辺が参考になるのではないでしょうか?

[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック
https://coliss.com/articles/build-websites/operation/css/css-seamless-responsive-photo-grid-by-css-tricks.html

最低限の CSS のみで Masonry のようなグリッドレイアウトを組む方法
https://sitest.jp/blog/?p=11921

投稿2018/06/12 08:43

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問