马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2020-9-8 23:48 编辑
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
先来说下课程一开始小甲鱼老师的说的小技巧。
将块级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>
现在将宽度设置为 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>
好了，搞定！
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） | 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-8-24 11:23:38
置顶卡
千斤顶
显身卡
发表于 2020-8-26 11:12:09
