让盒子两端对齐小技巧 => inline-block

今天在项目中碰到了设计盒子两端对齐的栗子，咱们用inline-block方法轻松的解决了，下面是我的经验：
　　原理： 利用文字text-align：justify; 操纵inline-block盒子，能够实现盒子两端对齐。

　　说明： inline-block元素 会按照基线对齐的方式两列，给这个元素的父盒子设置一个text-align：justify； 即可实现两端对齐的功能

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>盒子两端对齐</title>
 6 </head>
 7     <style type="text/css">
 8         * {
 9             margin: 0;
10             padding: 0;
11         }
12         html,body {
13             width: 100%;
14             height: 100%;
15         }
16         .box {
17             width: 100%;
18             height: 100%;
19             /* 设置元素两端对齐 */
20             text-align: justify;
21         }
22         /* 这里的伪元素一定要加上，不然span元素不能两端对齐 */
23         .box:after {
24             content: "";
25             display: inline-block;
26             overflow: hidden;
27             width: 100%;
28         }
29         .box span {
30             width: 50px;
31             height: 50px;
32             /* 设置盒子为行内块 */
33             display: inline-block;
34             background-color: skyblue;
35             /* 设置盒子内元素水平居中 */
36             text-align: center;
37             /* 设置盒子内容垂直居中 */
38             line-height: 50px;
39         }
40     </style>
41 <body>
42     <div class="box">
43         <span>1</span>
44         <span>2</span>
45         <span>3</span>
46         <span>4</span>
47         <span>5</span>
48     </div>
49 </body>
50 </html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>盒子两端对齐</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
.box {
width: 100%;
height: 100%;
/* 设置元素两端对齐 */
text-align: justify;
}
/* 这里的伪元素一定要加上，不然span元素不能两端对齐 */
.box:after {
content: "";
display: inline-block;
overflow: hidden;
width: 100%;
}
.box span {
width: 50px;
height: 50px;
/* 设置盒子为行内块 */
display: inline-block;
background-color: skyblue;
/* 设置盒子内元素水平居中 */
text-align: center;
/* 设置盒子内容垂直居中 */
line-height: 50px;
}
</style>
<body>
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>

从小就喜欢看科幻片，特别是电影里面几行代码就能够获得，然后解救全世界的神秘的人，当然最感兴趣的就是代码本身了

posted on 2017-11-07 22:21 queen_live 阅读(2513) 评论(0) 编辑收藏举报