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

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

ただいまの
回答率

90.50%

  • HTML

    10716questions

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

  • CSS

    6998questions

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

  • Sass

    316questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

flexboxで横並びにした孫要素?の縦幅を一緒にしたい

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 83

chaso0start

score 5

スクショ画像

右のテキスト部分の高さを左と同じ高さにしたいです。お力添えいただけますでしょうか。

<div class="voice_items">
            <div class="voice_item">
                <div class="voice_item_top">
                    <img src="img/home/btn_4.png" alt="">
                    <p>マンツーマン指導でメリハリボディ!</p>
                </div>
                <div class="voice_item_txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                    </p>
                </div>
            </div>
            <div class="voice_item">
                <div class="voice_item_top">
                    <img src="img/home/btn_4.png" alt="">
                    <p>週一トレーニング</p>
                </div>
                <div class="voice_item_txt">
                    <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
                    </p>
                </div>
            </div>
        </div>
.voice_items{
        display: flex;
        align-items: stretch;
        .voice_item {
            background: #CCCC99;
            max-width: 440px;
            width: 100%;
            margin: 20px;
            padding: 10px 20px;
            .voice_item_top {
                display: flex;
                align-items: center;
                img {
                    height: 40px;
                    width: 40px;
                }
                p {
                    padding-left: 20px;
                    padding-top: 10px;
                }
            }
            .voice_item_txt {
                background: #fff;
                margin: 10px 0;
                p {
                    padding: 20px;
                    font-size: 15px;
                    font-weight: 300;
                    line-height: 1.4;
                }
            }
        }
    }

.voice_item_txtにheight:100%では下にはみ出てしまいます。
どこをどのように指定すれば、高さが揃うのでしょうか。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+3

とある要素を共通の祖先要素として持つ 2 つの子孫要素の高さを揃えたいときは、共通の祖先要素から子孫要素へと辿ってゆき、 CSS Flexible Box Layout や CSS Grid Layout などを用いて高さを揃えてゆけば良いです。今回の場合、質問者さんの実現したいことは、 CSS Flexible Box Layout を用いて、以下のように行うことが出来ます(動作確認用リンク)。

<div class="voice_items">
  <div class="voice_item">
    <div class="voice_item_top">
      <img src="http://placehold.jp/ffffaa/ffffff/80x80.png?text=%20" alt="">
      <p>マンツーマン指導でメリハリボディ!</p>
    </div>
    <div class="voice_item_txt">
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
    </div>
  </div>
  <div class="voice_item">
    <div class="voice_item_top">
      <img src="http://placehold.jp/ffaaaa/ffffff/80x80.png?text=%20" alt="">
      <p>週一トレーニング</p>
    </div>
    <div class="voice_item_txt">
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      </p>
    </div>
  </div>
</div>
* {
  margin: 0;
  padding: 0;
}

.voice_items {
  display: flex;
  .voice_item {
    display: flex; /* 追記 */
    flex-direction: column; /* 追記 */
    width: 100%;
    max-width: 440px;
    margin: 20px;
    padding: 10px 20px;
    background: #cc9;
    .voice_item_top {
      display: flex;
      img {
        width: 40px;
        height: 40px;
      }
      p {
        padding-top: 10px;
        padding-left: 20px;
      }
    }
    .voice_item_txt {
      margin: 10px 0;
      background: #fff;
      flex: 1; /* 追記 */
      p {
        font-size: 15px;
        font-weight: 300;
        line-height: 1.4;
        padding: 20px;
      }
    }
  }
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/16 00:39

    解決致しました。早々に有難うございました。

    キャンセル

+2

確認してないコード、要点だけで申し訳ないですが

<div class="voice_item">
  <div class="voice_body">
    <div class="voice_item_top">
      <img src="img/home/btn_4.png" alt="">
      <p>週一トレーニング</p>
    </div>
    <div class="voice_item_txt">
      <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      </p>
    </div>
  </div>
</div>
.voice {
  &_body {
    background-color: #fff;
    height: calc(100% - 20px);
    margin-top: 10px;
    margin-bottom: 10px;
  }
  &_item {
    background-color: #CCCC99;
    &_top {
      background-color: #CCCC99;
    }
    &_text {
    }
  }
}

白いラッパーで囲み、見出しに背景色を付ける方法はいかがでしょう?
複数行の見出しは対応できませんが...

jsを使うなら.voice_itemの高さから.voice_item_topの高さを引くだけで.voice_item_txtの高さが出せるので自分で書いても簡単ですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/16 09:29

    今回は解決済みですが、今後のために参考になります。有難うございました。

    キャンセル

checkベストアンサー

+1

同内容の過去回答
何回同じScriptを薦めたことか…

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/16 00:40

    GitHubより入手し、無事に解決致しました。早々にご回答有難うございました。

    キャンセル

同じタグがついた質問を見る

  • HTML

    10716questions

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

  • CSS

    6998questions

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

  • Sass

    316questions

    Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。