html日记——三栏式布局

来源:互联网 发布:淘宝网店评估 编辑:程序博客网 时间:2024/05/29 03:07

最近在做完任务时有个三栏式布局

左右宽度固定,中间宽度自适应。

看了一下别人的代码,总结出一个很简单的思想

左边左浮动,右边右浮动,中间用margin

注意中间的div要放在左右的后面

最简单的代码如下

<html><head><meta charset="UTF-8"><title>test</title><style type="text/css">*{margin: 0px;padding: 0px;}.left{width: 200px;background-color: blue;float: left;}.right{width: 200px;background-color: red;float: right;}.middle{margin: 0px 220px;background-color: green;}</style></head><body><div class="left"> hello</div><div class="right"> !!!</div><div class="middle"> world</div></body></html>



0 0
原创粉丝点击