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

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

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

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

CSS

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

Q&A

解決済

2回答

941閲覧

横並びのリストの中身の配置を揃えるためのCSSについて

tetutetutetu

総合スコア46

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/03/08 12:06

編集2019/03/09 05:55

イメージ説明

添付画像のような横並びのリストを作成しています。

「テストテスト…」と書かれているタイトル部分の行数が変わっても
その下にあるタグの上部を揃えたいと思っています。

HTMLは下記のような感じです。

<ul> <li> <div class="img"><img src="image.png" alt=""></div> <h3>テストテストテストテストテストテストテスト</h3> <div class="tag">#タグ</div> <p>テキストテキストテキストテキストテキスト</p> </li> <li> <div class="img"><img src="image.png" alt=""></div> <h3>テストテストテストテスト</h3> <div class="tag">#タグ</div> <p>テキストテキストテキストテキストテキスト</p> </li> <li> <div class="img"><img src="image.png" alt=""></div> <h3>テストテストテスト</h3> <div class="tag">#タグ</div> <p>テキストテキストテキストテキストテキスト</p> </li> <li> <div class="img"><img src="image.png" alt=""></div> <h3>テストテストテストテストテストテストテスト</h3> <div class="tag">#タグ</div> <p>テキストテキストテキストテキストテキスト</p> </li> </ul>

現時点でのCSSは以下の通りです。

ul { display: flex; justify-content: flex-start; align-items: center; flex-wrap: nowrap; margin: 0 -5px; } li { width: calc( (100%/4) - 10px ); margin: 0 5px; } .img img { width: 100%; } h3 { font-size: 18px; margin: 10px 0; } .tag { font-size: 13px; color: #ccc; margin: 0 0 5px; } p { font-size: 14px; margin: 0; }

li要素に高さを指定して、タグとテキスト部分を「position:absolute;」で
配置指定すればいけそうですが、レスポンシブ対応もしなければいけないので、
あまりやりたくない手法です。

もっとスマートなやり方がありましたら、
どうかお教えいただけると幸いです。

よろしくお願いいたします。

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

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

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

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

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

cerfweb

2019/03/08 12:19

現時点でのcssもご提示いただけますか。
tetutetutetu

2019/03/09 05:56

現時点でのCSSを追加しました。今のままだとh3の行数が変わると、その下のタグ以降の位置も変わってしまうので、タグ以降の位置を揃えたいです。よろしくお願いいたします。
guest

回答2

0

jQueryで良いなら、
Match-Height

<ul>を囲んでいるのが#boxだとして、

HTML

1<script> 2 $(function() { 3 $('#box ul li h3').matchHeight(); 4 }); 5</script>

で指定できる。
レスポンシブに、列が4から3→2→1となっても、横に並んだ要素数の中で一番高いものに
揃えてくれます。

投稿2019/03/09 09:15

LibertyBell3

総合スコア1084

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

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

tetutetutetu

2019/03/09 11:06

ご回答ありがとうございます。 参考にさせていただきます。
guest

0

ベストアンサー

flexと言うよりCSSで、親要素を飛び越えた要素の高さを取得し、揃えるプロパティはないと思うので、「h3」の高さを決めるのが簡単かと思います。
※私の認識不足かも知れません。(^^;)

例)

CSS

1ul { 2 display: flex; 3 justify-content: flex-start; 4 align-items: center; /* ← 削除 */ 5 flex-wrap: nowrap; 6 margin: 0 -5px; 7} 8 9h3 { 10 font-size: 18px; 11 margin: 10px 0; 12 height: 3em; /* ← 追加・任意の高さ */ 13}

投稿2019/03/09 07:25

yoshinavi

総合スコア3521

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

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

tetutetutetu

2019/03/09 11:06

ご回答ありがとうございます。 h3に高さを指定するというのは盲点でした! 早速試してみます。
yoshinavi

2019/03/09 11:29

参考までに・・・ 私の回答も、「LibertyBell3」さんの回答も「h3」に高さを設定するのですが、私の回答は、高さ(h3)が固定値なので、テキストの量により、高さ(h3)の調整が必要な場合があります。 「LibertyBell3」さんの回答にあるリンク先より「jquery.matchHeight.js」をダウンロードして、jQueryのCDNを使うと、高さ(h3)が可変値で設定出来るので、調整が不要になります。 いろいろ試してみると良いかと思います。 (^^)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問