1.第一个元素使用margin:0 auto居中
2.第二三元素浮动,并且使用transform,位移x轴自身宽度100%
3.全屏版为下面两个元素各占50%,浮动或者inline-block
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>品字布局</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
div {
margin: auto 0;
width: 100px;
height: 100px;
background: red;
font-size: 40px;
line-height: 100px;
color: #fff;
text-align: center;
}
.div1 {
margin: 100px auto 0;
}
.div2 {
margin-left: 50%;
background: green;
float: left;
transform: translateX(-100%);
}
.div3 {
background: blue;
float: left;
transform: translateX(-100%);
}
</style></head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div></body>
</html>