<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.strap {
font-size: 0;
}
.strap>* {
display: inline-block;
}
.footer-content {
height: 254px;
}
.footer-narrow_wrapper {
width: 112px;
height: 253px;
}
.footer-wide_wrapper {
width: 357px;
height: 253px;
}
.footer-qrcode_wrapper {
width: 232px;
height: 253px;
}
.footer-square {
width: 110px;
height: 110px;
line-height: 110px;
border: 1px solid black;
font-size: 13px;
color: rgb(128, 128, 128);
text-align: center;
}
.footer-rectangle {
width: 355px;
height: 107px;
border: 1px solid black;
line-height: 110px;
text-align: center;
font-size: 18px;
color: rgb(128, 128, 128);
}
.footer-qrcode {
width: 230px;
height: 230px;
border: 1px solid black;
font-size: 12px;
color: rgb(51, 51, 51);
}
</style>
</head>
<body>
<div class="footer-content content strap">
<div class="footer-narrow_wrapper">
<div class="footer-square">關於我們</div>
<div class="footer-square">服務條款</div>
</div>
<div class="footer-narrow_wrapper">
<div class="footer-square">隱私政策</div>
<div class="footer-square">幫助中心</div>
</div>
<div class="footer-wide_wrapper">
<div class="footer-rectangle">4000-987-805</div>
<div class="footer-rectangle">[email protected]</div>
</div>
<div class="footer-wide_wrapper">
<div class="footer-rectangle">3041507598</div>
<div class="footer-rectangle">@人人碼官方微博</div>
</div>
<div class="footer-qrcode_wrapper">
<div class="footer-qrcode"></div>
</div>
</div>
</body>
</html>
元素的頂部不能對齊,搞不清楚是什麼原因,誰能講解下
就
.strap>*{
display: inline-block;
vertical-align:top;/*加上這個*/
}