首页 > 代码库 > 纯CSS最小响应网格布局

纯CSS最小响应网格布局

lemonade.css是一个超级小的CSS可以帮助你创建一个完全响应和灵活自如的网格布局,包括所需网页的头部。

技术分享

 

 

样式链接

<link rel= href=http://www.mamicode.com/>>

 

HTML结构这样创建一个多列网格布局:

<div class="frame">  <div class="bit-1">    <div class="box">1</div>  </div></div><div class="frame">  <div class="bit-2">    <div class="box">1/2</div>  </div>  <div class="bit-2">    <div class="box">1/2</div>  </div></div><div class="frame">  <div class="bit-3">    <div class="box">1/3</div>  </div>  <div class="bit-3">    <div class="box">1/3</div>  </div>  <div class="bit-3">    <div class="box">1/3</div>  </div></div>

 

 样品的CSS风格的格子

.box {  text-align: center;  background: #27ae60;  color: #fff;  padding: 15px 0 15px 0}

  

纯CSS最小响应网格布局