您的位置：首页 > 移动开发

第125天：移动端-空白字符问题解决办法

2017-12-25 23:02 429 查看

1、当我们想使用百分比来进行两个盒子的并排

代码：

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4   <meta charset="utf-8">
5   <style>
6     html,
7     body {
8       margin: 0;
9       padding: 0;
10     }
11
12     .container {
13       width: 1024px;
14       height: 2000px;
15       margin: 0 auto;
16     }
17
18     .container > div {
19       display: inline-block;
20     }
21
22     .left {
23       width: 80%;
24       height: 100%;
25       background-color: #ff0;
26     }
27
28     .right {
29       width: 20%;
30       height: 100%;
31       background-color: #00f;
32     }
33   </style>
34 </head>
35
36 <body>
37   <div class="container">
38     <div class="left"></div>
39     <div class="right"></div>
40   </div>
41 </body>
42 </html>

当我们想通过inline-block让两个div来并排，一个战父盒子的80%，一个占20%。可能看起来刚好100%，但是会由于代码中左右两个盒子之间的空白字符会导致右边的盒子掉下来。

2、解决办法

　　（1）消除空白字符

　　　　让左右两个盒子的代码紧密连起来，就是不要让他们中间有空白字符

　　（2）给父盒子添加属性font-size:0;来消除空白字符，推荐使用此方法

3、字母间距和单词间距

　　字母间距——letter-spacing

　　单词间距——word-spacing

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航