051 - 总为浮云能蔽日（上）
本帖最后由 不二如是 于 2020-9-8 23:48 编辑上一集：050 - 看山不是山（下）
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
先来说下课程一开始小甲鱼老师的说的小技巧。
将块级div设置为 inline-block 后会变为行内块元素。
inline-block 的元素特点：
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
这段定义注意看“允许空格”。
看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现多列布局</title>
<style type="text/css">
div.left {
width: 48%;
background-color: pink;
display: inline-block;
}
div.right {
width: 48%;
background-color: lightblue;
display: inline-block;
}
</style>
</head>
<body>
<div class="left">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse nulla molestiae eum, mollitia dolor
repudiandae nobis ullam vero ipsum provident inventore reprehenderit. Molestiae cumque soluta tempore minus ad
inventore dolore?</div>
<div class="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis nobis aliquid reiciendis alias sit
cupiditate? Commodi, facere cupiditate optio corrupti autem obcaecati, quod magni, nulla repudiandae distinctio
assumenda at! Explicabo?</div>
</body>
</html>
宽度都是 48%，默认的块级元素，就像行内元素一样排在一行：
现在将宽度设置为 50%：
div.left {
width: 50%;
background-color: pink;
display: inline-block;
}
div.right {
width: 50%;
background-color: lightblue;
display: inline-block;
}
现在看：
为什么会变成两行了呢？
难道是失效了？
这是因为在代码中的上下换行，会被解析为一个空格
当两个宽度都能容在一行中，自然没问题。
当我们设置为 50% 后，这个空格就会将第二个元素撑到下一行！
所以我们可以修改代码：
<div class="left">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse nulla molestiae eum, mollitia dolor
repudiandae nobis ullam vero ipsum provident inventore reprehenderit. Molestiae cumque soluta tempore minus ad
inventore dolore?</div><div class="right">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quis nobis aliquid reiciendis alias sit
cupiditate? Commodi, facere cupiditate optio corrupti autem obcaecati, quod magni, nulla repudiandae distinctio
assumenda at! Explicabo?</div>
现在看效果：
好了，搞定！
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：052 -总为浮云能蔽日（下）
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ） 沙发 {:10_256:} {:7_113:}
页:
[1]