web-dev-qa-db-fra.com

Comment créer une mise en page réactive à 3 colonnes?

J'ai une disposition à 3 colonnes. Lorsque vous y accédez depuis le bureau, cela s'affiche comme ceci:

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

Je veux que ce soit comme ça lorsque vous le visualisez depuis un navigateur mobile/tablette/redimensionner:

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

Mon échantillon ci-dessous, et voici le 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

Il y a plusieurs façons de procéder. Tout d'abord, vous devez faire en sorte que les divs s'affichent sous forme de colonnes pour les grands écrans, puis utilisez les requêtes multimédias pour les changer en lignes pour les écrans moyens/petits.

HTML pour tous: 

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

1. Flexbox:

JSFiddle

.container {
  display: flex;
}

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

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

2. Flotteur:

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. Bloc en ligne:

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. Table 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. Grille 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

Cela fonctionnera pour vous.

.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