首页 > 代码库 > 前端学习笔记田字格布局
前端学习笔记田字格布局
<!DOCTYPE html> <html> <head> <title>test </title> <meta charset="utf-8"> </head> <body> <style> div{ width:100px; height:100px; } #div1{ background: black; } #div2{ background: yellow; } #div3{ background: blue; } #div4{ background: green; } #container1{ float:left; } #container2{ float:left; } </style> <div id="container1"> <div id ="div1"></div> <div id ="div2"></div> </div> <div id="container2"> <div id ="div3"></div> <div id ="div4"></div> </div> </body> </html>
我是怎么考虑这个问题的,上篇文章我学会了并排显示两个块,点击这里查看 ,这篇文章是要弄一个田字格的,那么就是四个方块,四个方块可以看成是两个矩形,每个矩形是一个div,看下图就明白了。
按照上篇文章的学习的东西就弄出来了。
前端学习笔记田字格布局
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。