CSS3 响应式多列布局 2

调整预览屏幕宽度查看自适应布局效果。

multiple,column,responsive

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1744
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html {
  font-size: 100%;
  line-height: 1.5em; }

body {
  background-color: #1f7482;
  color: #faf0e0;
  font-family: 'Source Code Pro', sans-serif;
  width: 100%; }

h1 {
  font-size: 2.5em; }

h2 {
  font-size: 1.75em; }

h2:after {
  content: "Viewport < 720"; }

@media (min-width: 48em) {
  h2:after {
    content: 'Viewport > 720 && Viewport < 1280'; } }

@media (min-width: 80em) {
  h2:after {
    content: 'Viewport >= 1280'; } }

.container {
  *zoom: 1;
  max-width: 75em;
  _width: 75em;
  padding-left: 1em;
  padding-right: 1em;
  margin-left: auto;
  margin-right: auto; }

.container:after {
  content: "";
  display: table;
  clear: both; }

.block {
  width: 100%;
  background-color: #048f69;
  border: 2px solid #012c20;
  padding: 5px;
  margin-bottom: 10px;
  -moz-transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1); }

.block:after {
  content: "We're all 100% width"; }

@media (min-width: 48em) {
  .block {
    width: 32.20339%;
    float: left;
    margin-right: 1.69492%; }

.block:nth-child(3n) {
    float: right;
    margin-right: 0; }

.block:after {
    content: "We're three columns wide!"; } }

@media (min-width: 80em) {
  .block {
    width: 6.77966%;
    float: left;
    margin-right: 1.69492%; }

.block:nth-child(3n) {
    float: left;
    margin-right: 1.19048%; }

.block:after {
    content: "We're one column wide!"; } }

p {
  background-color: #048f69;
  border: 2px solid #012c20;
  padding: 5px; }

HTML

调整预览屏幕宽度查看自适应布局效果。

multiple,column,responsive

编辑器支持Emmet

快捷键

调整预览屏幕宽度查看自适应布局效果。

multiple,column,responsive

CSS3 动态高度梯田样式的响应式标签集

使用css flexbox（弹性框）实现的响应式布局网站模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：