如何创建3列响应布局 [英] 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 |
-------------------------------------------

从手机/平板电脑/ resize浏览器查看时，我希望它像这样：

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

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

推荐答案

使用 inline-block 与 @media 查询。

http://jsfiddle.net/6wqk7ksz/

.container {
    font-size: 0; /*fix white space*/
}
.container > div {
    font-size: 16px; /*reset font size*/
    display: inline-block;
    vertical-align: top;
    width: 33.33%;
    border: 1px solid red;
    box-sizing: border-box;
    text-align: center;
}
@media (max-width: 480px) { /*breakpoint*/
    .container > div {
        display: block;
        width: 100%;
    }
}

<div class="container">
    <div>left</div>
    <div>center</div>
    <div>right</div>
</div>

或者，使用 float 与 @media 查询。

http://jsfiddle.net/z775gdzd/

.container:after { /*clear float*/
    content: "";
    display: table;
    clear: both;
}
.container > div {
    float: left;
    width: 33.33%;
    border: 1px solid red;
    box-sizing: border-box;
    text-align: center;
}
@media (max-width: 480px) { /*breakpoint*/
    .container > div {
        float: none;
        width: 100%;
    }
}

<div class="container">
    <div>left</div>
    <div>center</div>
    <div>right</div>
</div>

或者，使用表和 @media 查询。

http://jsfiddle.net/7jydyw9f/

.container {
    display: table;
    table-layout: fixed; /*euqal column width*/
    width: 100%;
}
.container > div {
    display: table-cell;
    border: 1px solid red;
    text-align: center;
}
@media (max-width: 480px) { /*breakpoint*/
    .container > div {
        display: block;
    }
}

<div class="container">
    <div>left</div>
    <div>center</div>
    <div>right</div>
</div>

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