【CSS】企业级两栏布局

【CSS】企业级两栏布局,第1张

效果图

要点

利用固定定位和margin-left属性 PS:div是块级元素,不给宽度默认继承父级元素body的宽度

代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> body { margin: 0; } .div1 { position: absolute; top: 0; left: 0; width: 100px; height: 100px; background: black; } .div2 { height: 100px; margin-left: 100px; background: hotpink; } </style> </head> <body> <div ></div> <div ></div> </body> </html>

【CSS】企业级两栏布局

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/1006773.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-22
下一篇 2022-05-22

发表评论

登录后才能评论

评论列表(0条)

保存