サポート » 使い方全般 » flexを用いた2カラムレイアウトについて

  • 解決済 9-taro

    (@9-taro)


    お世話になります。
    下記のようなflexを用いた2カラムレイアウトを作っています。
    左は写真、右は文章で、写真及び文章の背景は画面サイズに合わせて、全幅にしています。
    ほぼうまく表示されているのですが、左のコラムより右のコラムの方が数十ピクセル幅広い状態になってしまいます。
    左右半分ずつ表示させるには、どう修正した方がいいでしょうか?
    恐縮ですが、urlはまだオープンにできません。
    ご教示いただければ、幸いです。

    【htmlコード】

    <div id=”column2″>

    <div id=”left-column”>
    <figure class=”wp-block-image size-large column-img”>“●●”</figure>
    </div>

    <div id=”right-column”>
    ~サイドバーなど~
    </div>

    </div>

    【cssコード】

    #column2 {
    display: flex;
    }

    #left-column {
    margin: 0 calc(50% – 50vw);
    width: 100vw;
    }

    #right-column {
    margin: 0 calc(50% – 50vw);
    width: 100vw;
    padding:50px;
    background-color:#ccc;
    color:#000;
    }

    .column-img {
    margin: 0;
    padding:0px;
    width: 100%;
    height: 100%;

    }

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • 恐らく、#right-columnのpaddingのぶんだけズレが生じています。
    box-sizing: border-box;でwidthにpaddingを加えた後にwidthから左右のpaddingぶんのサイズを引いてみてください。

    #right-column {
    margin: 0 calc(50% – 50vw);
    box-sizing: border-box;
    width:calc(100vw - 100px);
    padding:50px;
    background-color:#ccc;
    color:#000;
    }
    トピック投稿者 9-taro

    (@9-taro)

    moyo55様

    ご回答ありがとうございます。
    昔よくあったミスですね。
    おかげさまで、問題が解決しました。
    ご協力感謝します!

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「flexを用いた2カラムレイアウトについて」には新たに返信することはできません。