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

问题描述

我有3列的布局.从桌面访问它时，它显示如下:

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

下面是我的示例，这是 JSFiddle .

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>

推荐答案

有很多方法可以做到这一点.首先，您需要使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:

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

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