VWSとは フォーラム Lightning [ 解決済 ] カラム表示について

[ 解決済 ] カラム表示について

このトピックには3件の返信が含まれ、3人の参加者がいます。5 日、 16 時間前 kurudrive さんが最後の更新を行いました。

4件の投稿を表示中 - 1 - 4件目 (全4件中)
  • 投稿者
    投稿
  • #17329

    匿名

    Lightning Pro
    JPNSTYLE

    こちらを購入したものですが
    固定ページで
    flexboxを記入したのですが
    どうも反映されない感じです。

    ちなみにサンプル子テーマをダウンロードし使っています。
    CSSに

    .colmun_flex{
     display: flex;
     justify-content:;
     flex-wrap: wrap;
     width: 100%;
    }
    .column_box{
     width: 30%;
    }
    .column_box img{
    width: 100%;
    border: 3px solid #fff;
    }

    こんな感じです。
    HTMLは

    <div id="column_flex">
    <div class="column_box"><img src="/wp-content/uploads/2019/07/hall01.jpg"></div>
    <div class="column_box"><img src="/wp-content/uploads/2019/07/hall02.jpg"></div>
    <div class="column_box"><img src="/wp-content/uploads/2019/07/hall03.jpg"></div>
    </div>

    特に難しい記述もなく、今まで別なサイトでは、こんな感じでできてたのですが
    こちらのテーマは何か、反映されない理由(箇所)があるのでしょうか?

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

    #17333

    ※ベストアンサーに指定できるのは一人だけです。一度設定すると変更できません。

    kurudrive
    参加者

    colmun_flex が id なら

    #colmun_flex{
     display: flex;
     justify-content:;
     flex-wrap: wrap;
     width: 100%;
    }

    です。

    .colmun_flex{

    なら

    <div class="column_flex">

    になります。

    #17334

    ※ベストアンサーに指定できるのは一人だけです。一度設定すると変更できません。

    RICK
    参加者
    .colmun_flex{
     display: flex;
     justify-content:;
     flex-wrap: wrap;
     width: 100%;
    }
    .column_box{
     width: 30%;
    }
    .column_box img{
    width: 100%;
    border: 3px solid #fff;
    }

    上記のようにCSSで定義しているので

    <div class="column_flex">
    <div class="column_box"><img src="/wp-content/uploads/2019/07/hall01.jpg"></div>
    <div class="column_box"><img src="/wp-content/uploads/2019/07/hall02.jpg"></div>
    <div class="column_box"><img src="/wp-content/uploads/2019/07/hall03.jpg"></div>
    </div>

    でないと正常に反映されないと思います。
    ちなみに、cssでのidに該当するものは#です。

    あと、Lightning は Bootstrap をベースとしているため、グリッドシステムを使用できます。

    #17335

    ※ベストアンサーに指定できるのは一人だけです。一度設定すると変更できません。

    kurudrive
    参加者

    あとはそもそもCSSを書かなくても特定の記述でできます。

    http://bootstrap3-guide.com/base/grid.html

    あとはそもそもブロックエディタの「カラムブロック」を使えばコードを書かずにできます。

4件の投稿を表示中 - 1 - 4件目 (全4件中)

このトピックに返信するにはログインが必要です。