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

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

ただいまの
回答率

88.22%

ul内のdivの高さを揃えたい

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 3,736

terataka

score 75

写真の下に説明を入れる感じの物を作ろうとしています。料理のメニューのような感じです。

      <div class="newlist">
          <ul>
            <li><img src="images/dummy1.gif" width="200" height="200" /><br />
              <div class="newlisttxt">ここにジャンル<br />
                ここに名前
              </div>
            </li>
            <li><img src="images/dummy1.gif" width="200" height="200" /><br />
              <div class="newlisttxt">ここにジャンル<br />
                ここに名前
              </div>
            </li>
また、この部分のCSSは以下の通りです。
.newlist {
    padding:25px 0;
    overflow:hidden;
}
.newlist ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.newlist li {
    padding-right:20px;
    float: left;
}
.newlisttxt {
    background-color:#A8E08D;
    color:#FFF;
    width:190px;
    padding:10px 5px;
}

横幅が200pxと狭いため、名前部分が長いと2行になってしまうものがあり、テキスト部分の高さがそろいません。
高さを固定にしてもいいのかもしれませんが、2行の高さで固定して1行だったら変ですし見る環境によって微妙にずれが出るのも避けたいので、出来れば自動で高さを揃えたいです。

この場合どのようにしたら高さを揃えられますか?

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+1

    .newlist {
        padding: 25px 0;
    }
    .newlist ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
        display: flex;
    }
    .newlist li {
        padding-right: 20px;
        overflow: hidden;
    }
    .newlisttxt {
        background-color: #A8E08D;
        color: #FFF;
        width: 190px;
        padding: 10px 5px 32767px 5px;
        margin-bottom: -32757px;
    }
  1. display: flexでliの高さを揃えて横並び
  2. divの高さをpadding,-marginでブラウザいっぱいまで広げる
  3. liをoverflow:hidden
といった感じで揃えてみました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2014/12/11 09:22

    回答ありがとうございます。
    そのままコピペしてみましたが、横に並ばす縦に並んでしまいました。

    キャンセル

  • 2014/12/11 09:54

    すみません。
    私が利用しているソフト上でよこ縦並びになっただけで、ブラウザ上ではちゃんと横並びになっていました。
    また、希望通りに高さもそろいました!

    解答ありがとうございます。

    キャンセル

  • 2014/12/11 10:52

    よかったです!
    display: flexのベンダープレフィックスの付け方やfloatのようにブラウザの最大幅で折り返したいとき、その他使い方がコチラにまとまってたので参考にしてみてください。
    ■CSS3の「フレキシブルレイアウト」使い方まとめ
    http://www.flapism.jp/html/278/

    キャンセル

+1

いっその事、高さを固定にしたほうが見栄えはいいかもです。

.newlisttxt {
    background-color:#A8E08D;
    color:#FFF;
    width:190px;
    padding:10px 5px;
    height: 2rem;              /* 最悪でも2文字入る高さ */
    white-space: nowrap;    /* 文字列を折り返しさせない */
    overflow: hidden;        /* はみ出したとこは描画しない */
    text-overflow: ellipsis;  /* 文字列を表示しきれない場合 ...を表示 */
}
│魚料理      ││魚料理      │
│サーモンのカルパ…││刺身盛り合わせ  │

こんなかんじで、表示しきれない文字を…にしてあげて
画像のalt、title属性に料理名入れてマウスオーバーで全文表示させる方法はいかがでしょう?
<li><img alt="サーモンのカルパッチョ" title="サーモンのカルパッチョ"><!-- <div>略</div> --></li>
<li><img alt="刺身盛り合わせ" title="刺身盛り合わせ"><!-- <div>略</div> --></li>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2014/12/11 09:21

    回答ありがとうございます。

    やはり固定の方が良いでしょうか…
    全て1行になった場合、下の空白がかなり気になりそうです…
    マウスオーバーの方法もいい感じですが、あと1文字が2段目に行くと言うのが結構出そうですw
    もっと長ければいい感じになるのでしょうけど、あと1文字のため「・・・」にするのもちょっとスマートではなさそうです。

    キャンセル

0

overflow: scroll;でスクロールバーなど...
バーのデザイン変更でなんとなくいい感じになると思われる

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2014/12/11 09:17

    解答ありがとうございます。
    幅が狭いので、スクロールバーを入れるスペースはありません。
    また、1行か2行かにしかならないので、スクロールバーを入れるのもちょっと変な気がしますが…

    キャンセル

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

  • ただいまの回答率 88.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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