web-dev-qa-db-ja.com

3列のレスポンシブレイアウトを作成する方法

3列のレイアウトがあります。デスクトップからアクセスすると、次のように表示されます。

-------------------------------------------
| columnleft | columncenter | columnright |
-------------------------------------------

モバイル/タブレット/ブラウザのサイズを変更して表示すると、次のようになります。

----------------
| columnleft   |
----------------
| columncenter |
----------------
| columnright  |
----------------

以下の私のサンプル、そしてここに JSFiddle があります。

<style>
    .column-left{ float: left; width: 33%; }
    .column-right{ float: right; width: 33%; }
    .column-center{ display: inline-block; width: 33%; }
</style>
<div class="container">
    <div class="column-left">Column left</div>
    <div class="column-center">Column center</div>
    <div class="column-right">Column right</div>
</div>
htmlcssresponsive-designmultiple-columns
9
Maestro Vladimir

それを行うには多くの方法があります。まず、divを大きな画面の列として表示するようにしてから、メディアクエリを使用してdivを中/小さな画面の行に変更する必要があります。

HTML for all：

<div class="container">
  <div class="section">1</div>
  <div class="section">2</div>
  <div class="section">3</div>
</div>

1.フレックスボックス：

JSFiddle

.container {
  display: flex;
}

.section {
  flex: 1; /*grow*/
  border: 1px solid;
}

@media (max-width: 768px) { /*breakpoint*/
  .container {
    flex-direction: column;
  }
}

2.フロート：

JSFiddle

.container:after { /*clear float*/
  content: "";
  display: table;
  clear: both;
}

.section {
  float: left;
  width: 33.3333%;
  border: 1px solid;
  box-sizing: border-box;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    float: none;
    width: auto;
  }
}

3.インラインブロック：

JSFiddle

.container {
  font-size: 0; /*remove white space*/
}

.section {
  font-size: 16px; /*reset font size*/
  display: inline-block;
  vertical-align: top;
  width: 33.3333%;
  border: 1px solid;
  box-sizing: border-box;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    display: block;
    width: auto;
  }
}

4. CSSテーブル：

JSFiddle

.container {
  display: table;
  table-layout: fixed; /*euqal column width*/
  width: 100%;
}

.section {
  display: table-cell;
  border: 1px solid;
}

@media (max-width: 768px) { /*breakpoint*/
  .section {
    display: block;
  }
}

5. CSSグリッド：

JSFiddle

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /*fraction*/
}

.section {
  border: 1px solid;
}

@media (max-width: 768px) { /*breakpoint*/
  .container {
    grid-template-columns: none;
  }
}
23
Stickers

それはあなたのために働くでしょう。

.column-left{ float: left; width: 33%; }
.column-right{ float: right; width: 33%; }
.column-center{ display: inline-block; width: 33%; }

@media screen and (max-width: 960px) {
    .column-left{ float: none; width: 100%; }
    .column-right{ float: none; width: 100%; }
    .column-center{ display: block; width: 100%; }
}
3
Ashot Khanamiryan