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

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

ただいまの
回答率

90.75%

  • HTML5

    3714questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1906questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • Bootstrap

    869questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

divで囲んだ部分が縦に並ばない

解決済

回答 1

投稿

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

abc30

score 28

前提・実現したいこと

divのitemsクラスで囲んだ部分が縦に並ばない。
col-xs-8とcol-xs-4を使い画面を8:4に分けてその4の部分に画像を縦に並べたい。

発生している問題・エラーメッセージ

htmlに

<div class="items col-xs-4">
                        <div class="flex-item"><a href="https://wwwwwwwwww" target="_blank" rel="nofollow">
<img border="0" width="250" height="250" alt="" src="https://yyyyyyyyyyy"></a>
<img border="0" width="1" height="1" src="https://wwweeeeeeeee" alt=""></div>
                    </div>

                    <div class="items col-xs-4">
                        <div class="flex-item"><a href="https://zzzzzzzzzzzzzzzzzzzzz" target="_blank" rel="nofollow">
<img border="0" width="350" height="240" alt="" src="https://wwwxxxxxxxxxxxxxx"></a>
<img border="0" width="1" height="1" src="https://wwwqqqqqqqqqq" alt=""></div>
                    </div>

                    <div class="items col-xs-4">
                        <div class="flex-item"><a href="https://qqqqqqqqqqqqq" target="_blank" rel="nofollow">
<img border="0" width="300" height="250" alt="" src="https://wwwllllllllllll"></a>
<img border="0" width="1" height="1" src="https://wwweeeeeeeeeee" alt=""></div>
                    </div>


と書いたitemsクラスを縦に並べたい。しかし、今は横に並んでいる。

該当のソースコード

html全体には

{% load static%}
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static 'detail.css' %}">
    <link rel="stylesheet" href="{% static 'bootflat/css/bootflat.min.css' %}">

    <title>WEB SITE</title>
</head>

<body class="relative">
{% include '../header.html' %}

    <main>
        <div class="container">
            <div class="detailimg col-xs-8">
                <div class="relative_ele">
                    <img class="absolute-fill" src="{% static 'accounts/detail.jpg' %}" width="500px" height="300px" alt="詳細" />

                    <div class="absolute-fill vertical-center-container">
                        <p class="hthree">XOXO</p>
                            <p class="hthree_small">I LOVE YOU<br>I MISS YOU</p>
                    </div>
         </div>


                <a class="button-primary" href="send">SEND</a>
                <a class="button-primary" href="see">SEE</a>
                <a class="button-primary" href="know">KNOW</a>
            </div>

                  <div class="items col-xs-4">
                        <div class="flex-item"><a href="https://wwwwwwwwww" target="_blank" rel="nofollow">
<img border="0" width="250" height="250" alt="" src="https://yyyyyyyyyyy"></a>
<img border="0" width="1" height="1" src="https://wwweeeeeeeee" alt=""></div>
                    </div>

                    <div class="items col-xs-4">
                        <div class="flex-item"><a href="https://zzzzzzzzzzzzzzzzzzzzz" target="_blank" rel="nofollow">
<img border="0" width="350" height="240" alt="" src="https://wwwxxxxxxxxxxxxxx"></a>
<img border="0" width="1" height="1" src="https://wwwqqqqqqqqqq" alt=""></div>
                    </div>

                    <div class="items col-xs-4">
                        <div class="flex-item"><a href="https://qqqqqqqqqqqqq" target="_blank" rel="nofollow">
<img border="0" width="300" height="250" alt="" src="https://wwwllllllllllll"></a>
<img border="0" width="1" height="1" src="https://wwweeeeeeeeeee" alt=""></div>
                    </div>

        </div>
    </main>

    <footer>
      <div class="footers">
        <ul class="bottom-menu">
              <li class="bottom-menu-item"><a class="bottom_index" href="">ご利用規約とプライバシポリシー</a></li>
        </ul>
      </div>
  </footer>
</body>

</html>


cssには

* {
    margin: 0;
    padding: 0;
}


ul {
    display: flex;
}

.flex-item {
    width: 100%;
}

.half-width {
    width: 50%;
}

.title {
    color: white;
    font-size: 70px;
    align-self: center;
}

.top-menu-item{
    list-style: none;
    font-size: 17px;
}


main {
    display: flex;
}

main div.detailimg {
    margin: 30px;
}

.white-letter {
    color: white;
}

.right-position {
    width: 100%;
}

.float-left {
    float: left;
}

.btn btn-primary btn-lg {
    background-color: black;
}

.outer {
    display: flex;
    justify-content: center;
    align-items: center;
}

.items{
    display: flex;
    width:400px;
    height:300px;
    align-items: flex-start;
}

.flex-item{
   flex-flow: column nowrap;
   margin: 20px 30px;
}


.relative_ele{
    position: relative;
    height:300px
}
.absolute-fill {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
}

.vertical-center-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.hthree {
    color: white;
    font-size: 30px;
    padding-top:70px;
    padding-left:8px;
    font-weight: bold;
}

.hthree_small {
    color: white;
    font-size: 20px;
    padding-left:30px;
    margin-top:0px;
    margin-left:0px;
}

.button-primary {
    display: inline-block;
    width: 300px;
    height: 45px;
    font-size: 20px;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 0px;
    margin: 10px 0px;
    border-radius: 6px;
}

footer{
 height: 50px;
 width: 100%;
 background-color: black;
 position:absolute;
 bottom:0;
}

.footers{
 background-color: pink;
 position:absolute;
 bottom:0;
}

.relative {
 position: relative;
}

.bottom-menu-item{
    list-style: none;
    font-size: 15px;
}
.bottom_index {
    color: white;
    padding-left: 30px;
}


と書いた。

試したこと

CSSのitemsに
align-items: flex-start; の代わりに
justify-content: flex-start; ・ justify-content: flex-end;
と指定したがitemsの要素は縦に並ばなかった。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

的外れかもしれませんが、質問者さんの実現したいことは以下のように行えると思います。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.min.css" rel="stylesheet">
    <title>タイトル</title>
    <style type="text/css">
        img {
            width: 100%;
            height: auto;
        }

        .col-xs-8 {
            width: calc(66.66666667% - 60px);
        }

        main, ul {
            display: flex;
        }

        .detailimg {
            margin: 30px;
        }

        .items {
            display: flex;
            /*width: 400px;*/
            /*height: 300px;*/
            align-items: flex-start;
        }

        .flex-item {
            margin: 20px 30px;
            flex-flow: column nowrap;
        }

        .relative_ele {
            position: relative;
            height: 300px;
        }

        .absolute-fill {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }

        .vertical-center-container {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
        }

        .hthree {
            font-size: 30px;
            font-weight: bold;
            padding-top: 70px;
            padding-left: 8px;
            color: white;
        }

        .hthree_small {
            font-size: 20px;
            margin-top: 0;
            margin-left: 0;
            padding-left: 30px;
            color: white;
        }

        .button-primary {
            font-size: 20px;
            display: inline-block;
            /*width: 300px;*/
            width: 100%;
            height: 45px;
            margin: 10px 0;
            padding: 5px 0;
            text-align: center;
            color: white;
            border-radius: 6px;
            background-color: black;
        }

        footer {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 50px;
            background-color: black;
        }

        .footers {
            position: absolute;
            bottom: 0;
            background-color: pink;
        }

        .bottom-menu-item {
            font-size: 15px;
            list-style: none;
        }

        .bottom_index {
            padding-left: 30px;
            color: white;
        }
    </style>
</head>
<body>
<main>
    <div class="container-fluid">
        <div class="row">
            <div class="detailimg col-xs-8">
                <div class="relative_ele">
                    <img class="absolute-fill" src="https://placehold.jp/3d4070/ffffff/150x150.png?text=%20"
                         alt="詳細">

                    <div class="absolute-fill vertical-center-container">
                        <p class="hthree">XOXO</p>
                        <p class="hthree_small">I LOVE YOU<br>I MISS YOU</p>
                        <a class="button-primary" href="send">SEND</a>
                        <a class="button-primary" href="see">SEE</a>
                        <a class="button-primary" href="know">KNOW</a>
                    </div>
                </div>
            </div>
            <div class="col-xs-4">
                <div class="items">
                    <div class="flex-item">
                        <a href="" target="_blank" rel="nofollow">
                            <img border="0" width="250" height="250" alt=""
                                 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image2">
                        </a>
                        <img border="0" width="1" height="1"
                             src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image3" alt="">
                    </div>
                </div>
                <div class="items">
                    <div class="flex-item">
                        <a href="" target="_blank" rel="nofollow">
                            <img border="0" width="250" height="250" alt=""
                                 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image4">
                        </a>
                        <img border="0" width="1" height="1"
                             src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image5" alt="">
                    </div>
                </div>
                <div class="items">
                    <div class="flex-item">
                        <a href="" target="_blank" rel="nofollow">
                            <img border="0" width="250" height="250" alt=""
                                 src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image6">
                        </a>
                        <img border="0" width="1" height="1"
                             src="https://placehold.jp/3d4070/ffffff/150x150.png?text=image7" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<footer>
    <div class="footers">
        <ul class="bottom-menu">
            <li class="bottom-menu-item"><a class="bottom_index" href="">ご利用規約とプライバシポリシー</a></li>
        </ul>
    </div>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.selecter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/js/jquery.fs.stepper.min.js"></script>
</body>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/10/14 23:16

    ありがとうございます。コードを試してみたのですが、divのitemsクラスの画像は横一列に並んでしまいました。Googleのデベロッパーツールを使ってみると、width: calc(66.66666667% - 60px); が効いていないようでした。。。原因は何が考えられるでしょうか?

    キャンセル

  • 2017/10/14 23:27 編集

    > コードを試してみたのですが、divのitemsクラスの画像は横一列に並んでしまいました。
    どのブラウザでその問題は発生しましたか?こちらのGoogle Chromeでは発生しないのですが...。

    キャンセル

  • 2017/10/14 23:35

    Google Chromeです。画像が大きかったとかですかね??

    キャンセル

  • 2017/10/14 23:41

    質問文のコードをそのまま実行した場合も同様の問題が発生しますか?

    キャンセル

  • 2017/10/14 23:44

    はい、発生します

    キャンセル

  • 2017/10/14 23:50 編集

    申し訳ありません、先ほどのコメントの「質問文のコード」は「回答文のコード」のタイプミスです。回答文のコードをそのまま実行した場合も同じ問題が再現するか、確かめてみていただけませんか?

    キャンセル

  • 2017/10/15 00:05

    私のコードでは<div class="items col-xs-4">でしたがそこの部分を変更されていたのですね!解決しました!ありがとうございます。

    キャンセル

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

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

関連した質問

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

  • 受付中

    レスポンシブルデザインについて

    ページ上部のメニューをクリックしたらスマホのサイトのようなメニューバーを表示させたいのですがどうすればよろしいでしょうか。 ちなみにこちらのサイトを参考にしました https://

  • 解決済

    footerとdivで囲んだ間の要素に隙間を空けたい

    前提・実現したいこと footerと3番目の<div class="advertisement">で囲んだ間の要素に隙間を空けたいが、今ぴったりくっついている。 発生している問

  • 解決済

    画像の下にテーブルが来てしまう

    前提・実現したいこと 画像の下にテーブルが来てしまう。 画像とテーブルの間に30px隙間を空けて配置したい。 発生している問題・エラーメッセージ エラーは特に発生していない。

  • 解決済

    Progateの「HTML & CSS 道場コース 初級編」の「フッターを作ろう」という問題について

    おはようございます。お世話になります。 Progateの「HTML & CSS 道場コース 初級編」の「フッターを作ろう」という問題です。 自分が書いたコードが見本のコード(=

  • 解決済

    見出しと画像を横2列に並べたい。

    見出しと画像を横並びにしたいのに、改善されません。あまりにも時間がかかりすぎてるので、質問させていただきました。 <article> <div cl

  • 解決済

    フッター下の余白を消したい

    いつもお世話になっております。 以前に似たような質問をしたのですが、違うページにて問題を解決できなかったため改めて質問させていただきました。 サイトのフッター下に微妙な余白がで

  • 受付中

    flex-growをflex-wrap:wrapに適用したい

    一つだけ拡大したいのですがflex-wrap:wrapだと厳しいのでしょうか? よろしくお願いします。 [CodePen] https://codepen.io/anon/pe

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

  • HTML5

    3714questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • CSS3

    1906questions

    CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

  • Bootstrap

    869questions

    BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。