CSS HTMLのテーブルを使用せずに、それぞれに異なるものを含む3つの列を作成しようとしています

debugcn 投稿 Dev

CodeChops

これができるかどうかわからない。これは私が何度も試みた後のところです。

HTMLページを3列下にレイアウトし、各列にさまざまな種類のものを配置したいと思います。私は多くのことを試みましたが、アイデアが不足しました。これはテーブルでのみ実行できるということですか？

または、CSSのみを使用してHTMLを変更せずに、以下のサンプルグリッドのように列を配置する方法はありますか？

私が欲しいもの：

----------------------------------------------------
| Column left 1|   Column center   | Column right  |
---------------|                   |----------------
| Column left 2|                   |
---------------|                   |
| Column left 3|                   |
---------------|                   |
               |-------------------|

私が得るもの：

----------------------------------------------------
| Column left 1|   Column left 2   | Column left 3 |
---------------|-------------------|----------------
-------------------------------------
|   Column center   | Column right  |
|                   |----------------
|                   |
|                   |
|                   |
|                   |
|-------------------|

これが私の最後の試行コードです...

    * {
      box-sizing: border-box;
    }

    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      height: 200px; /* Should be removed. Only for demonstration */
    }

    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    <h2>Three Columns</h2>

    <div class="row">
    <div>
      <div class="column" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#aaa;">
        <h2>Column 1 a</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#bbb;">
        <h2>Column 1 b</h2>
        <p>Some text..</p>
      </div>
    </div>
      <div class="column" style="background-color:#bbb;height: 650px">
        <h2>Column 2</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#ccc;">
        <h2>Column 3</h2>
        <p>Some text..</p>
      </div>
  </div>

どんな助けや提案もいただければ幸いです。前もって感謝します。

the_legitTDM

display: flex;これを試してみると、コンテナの設定方法をもう少し制御できます。パディングを調整して、要素間のスペースを削除することもできます。

.row {
  display: flex;
}
.column {
  flex: 1;
}
.col-1-cont {
  padding: 1rem;
}

    <h2>Three Columns</h2>

    <div class="row">
    <div class="column" id="column-1">
      <div class="col-1-cont" style="background-color:#aaa;">
        <h2>Column 1</h2>
        <p>Some text..</p>
      </div>
      <div class="col-1-cont" style="background-color:#aaa;">
        <h2>Column 1 a</h2>
        <p>Some text..</p>
      </div>
      <div class="col-1-cont" style="background-color:#bbb;">
        <h2>Column 1 b</h2>
        <p>Some text..</p>
      </div>
    </div>
      <div class="column" style="background-color:#bbb;height: 650px">
        <h2>Column 2</h2>
        <p>Some text..</p>
      </div>
      <div class="column" style="background-color:#ccc; height: 200px;">
        <h2>Column 3</h2>
        <p>Some text..</p>
      </div>
  </div>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]