如何创建3列响应式布局？ [英] How to create a 3 column responsive layout?

问题描述

我有3列布局。当从桌面访问它时，它显示如下：

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

我想在移动设备/平板电脑/调整大小浏览器中查看时，它就像这样：

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

我的示例如下，这里是 JSFiddle 。

 <风格> 
 .column-left {float：left;宽度：33％; } 
 .column-right {float：right;宽度：33％; } 
 .column-center {display：inline-block;宽度：33％; } 
< / style> 
< div class =container> 
< div class =column-left>左栏< / div> 
< div class =column-center>列中心< / div> 
< div class =column-right>列右侧< / div> 
< / 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。 Flexbox：

JSFiddle

  .container {
 display：flex; 
} 
 
 .section {
 flex：1; / *增长* / 
 border：1px solid; 
} 
 
 @media（max-width：768px）{/ *断点* / 
 .container {
 flex-direction：column; 
} 
} 
  

2。 Float：

JSFiddle

  .container：after {/ * clear float * / 
 content： ; 
 display：table; 
明确：两者; 
} 
 
 .section {
 float：left; 
宽度：33.3333％; 
 border：1px solid; 
 box-sizing：border-box; 
} 
 
 @media（max-width：768px）{/ *断点* / 
 .section {
 float：none; 
 width：auto; 
} 
} 
  

3。内联块：

JSFiddle

  .container {
 font-size：0; / *删除空格* / 
} 
 
 .section {
 font-size：16px; / *重置字体大小* / 
 display：inline-block; 
 vertical-align：top; 
宽度：33.3333％; 
 border：1px solid; 
 box-sizing：border-box; 
} 
 
 @media（max-width：768px）{/ *断点* / 
 .section {
 display：block; 
 width：auto; 
} 
} 
  

4。 CSS表格：

JSFiddle

  .container {
 display：table; 
 table-layout：fixed; / * euqal列宽* / 
宽度：100％; 
} 
 
 .section {
 display：table-cell; 
 border：1px solid; 
} 
 
 @media（max-width：768px）{/ *断点* / 
 .section {
 display：block; 
} 
} 
  

5。 CSS grid：

JSFiddle

  .container {
 display：grid; 
 grid-template-columns：1fr 1fr 1fr; / *分数* / 
} 
 
。部分{
 border：1px solid; 
} 
 
 @media（max-width：768px）{/ *断点* / 
 .container {
 grid-template-columns：none; 
} 
} 
  

I have a 3 column layout. When access it from desktop, it shows like this:

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

I want it to be like this when view it from mobile / tablet / resize browser:

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

My sample below, and here is the 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>

解决方案

There are many ways to do it. First, you need to make the divs to display as columns for large screens, then use media queries to change them to rows for medium/small screens.

HTML for all:

<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. Float:

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. Inline block:

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 table:

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 grid:

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;
  }
}

这篇关于如何创建3列响应式布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！