三栏布局的实现

来源：互联网发布：mac jmeter下载安装编辑：程序博客网时间：2024/05/01 12:04

花了一个晚上的时间，折腾出了一个比较简洁的三栏布局！以下是代码：

三栏布局.html

<!doctype html><html><head><link href="三栏布局.css" rel="stylesheet" type="text/css"><meta charset="utf-8"><title>三栏布局</title></head><body><body><div class="Page"><div class="line"><span class="left">产品名称</span><span  class="middle">价格</span><span class="right">数量</span></div><hr><div class="line"><span class="left">iPad</span><span class="middle">￥3000</span><span class="right">购买</span></div><hr><div class="line"><span class="left">笔记本</span><span class="middle">￥4000</span><span class="right">购买</span></div><hr class="pointLine"><div class="line"><span class="left">数码相机</span><span class="middle">￥2000</span><span class="right">购买</span></div><hr><div class="line"><span class="left">iPhone</span><span class="middle">￥3500</span><span class="right">购买</span></div></div></body></html>

三栏布局.css

@charset "utf-8";/* CSS Document */.Page {width: 500px;margin: 0 auto;}.left {width:100px;display: inline-block;float: left;}.middle {width:300px;display: inline-block;text-align: center;}.right {float: right;}

以下是效果：

0 0