css之品字布局

最新推荐文章于 2022-08-09 21:38:30 发布

机器猫zhao

最新推荐文章于 2022-08-09 21:38:30 发布

阅读量5.7k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/zx_p24/article/details/53331715

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1、品字布局（每块都有固定宽高）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>品字布局</title>
<style>
*{margin:0; padding:0;}
div{ width:100px; height:100px; background:red; font-size:40px; line-height:100px; color:#fff; text-align:center;}
.div1{ margin:50px auto 0;}
.div2{ background:green; float:left; margin-left:50%; position:relative; left:-100px;}
.div3{ background:blue; float:left; position:relative; left:-100px;}
</style>
</head>

<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
</html>

显示结果：

2、实现全屏的品字布局（自适应的）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>品字布局</title>
<style>
*{margin:0; padding:0;}
div{ width:100%; height:100px; background:red; font-size:40px; line-height:100px; color:#fff; text-align:center;}
.div1{ margin:0 auto 0;}
.div2{ background:green; float:left; width:50%;}
.div3{ background:blue; float:left; width:50%;}
</style>
</head>

<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
</body>
</html>

显示效果：

机器猫zhao

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
css之品字布局

1、品字布局（每块都有固定宽高）品字布局*{margin:0; padding:0;}div{ width:100px; height:100px; background:red; font-size:40px; line-height:100px; color:#fff; text-align:center;}.div1{ margin:50px auto 0;}.div2
复制链接

扫一扫

专栏目录