<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>fluid流体布局,横向百分比,竖向固定数值</title> <style> body{ margin: 0; } .box a{ width: calc(25% - 4px); /* 使用calc()函数计算长度的时候,需要注意语法. 计算符号两边数字之间应有空格留白. 用以区分. */ border: 2px solid #000; line-height:200px; height: 200px; float: left; background: coral; } .box2 a{ width: 25%; height: 200px; border: 2px solid #000; line-height: 200px; text-align: center; float: left; background: khaki; box-sizing: border-box; } /* 在使用流体布局的时候: 1.calc计算减去边框 2.直接设置盒子大小 box-sizing:border-box;(意为盒子大小包含边框大小) 两种方法相比较, 第二种方法更为方便,且兼容性更好. 多数应该使用第二种方法. 当使用第一种方法的时候要查看border对整体大小的影响,以及margin叠加. */ </style> </head> <body> <div class="box"> <a href="#">网址:1</a> <a href="#">网址:2</a> <a href="#">网址:3</a> <a href="#">网址:4</a> </div> <div class="box2"> <a href="#">网址:(1)</a> <a href="#">网址:(2)</a> <a href="#">网址:(3)</a> <a href="#">网址:(4)</a> </div> </body> </html>