Html 如何创建 3 列响应式布局？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30141292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a 3-column responsive layout?
提问by Maestro Vladimir
I have a 3 column layout. When access it from desktop, it shows like this:
我有一个 3 列布局。从桌面访问它时，它显示如下：
-------------------------------------------
| 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.
下面是我的示例，这里是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>
回答by Stickers
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.
有很多方法可以做到。首先，您需要使 div 显示为大屏幕的列，然后使用媒体查询将它们更改为中/小屏幕的行。
HTML for all:
所有人的 HTML：
<div class="container">
<div class="section">1</div>
<div class="section">2</div>
<div class="section">3</div>
</div>
1. Flexbox:
1. 弹性盒：
.container {
display: flex;
}
.section {
flex: 1; /*grow*/
border: 1px solid;
}
@media (max-width: 768px) { /*breakpoint*/
.container {
flex-direction: column;
}
}
2. Float:
2. 浮动：
.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:
3.内联块：
.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:
4.CSS表：
.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:
5.CSS网格：
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /*fraction*/
}
.section {
border: 1px solid;
}
@media (max-width: 768px) { /*breakpoint*/
.container {
grid-template-columns: none;
}
}
回答by Ashot Khanamiryan
It will work for you.
它会为你工作。
.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%; }
}
