如何创建3列响应式布局？

问题描述

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

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

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

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

我的示例如下，这里是。

 <风格> 
 .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：

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

2。 Float：

  .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。内联块：

.container {
  display: flex;
}

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

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

2. Float:

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

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

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

.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列响应式布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！