|
|
马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
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>
宽度都是 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>
现在看效果：
好了，搞定！
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（ 传送门）（ 不喜欢更要订阅 ） |
|
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2020-8-24 11:23:38
置顶卡
千斤顶
显身卡
发表于 2020-8-26 11:12:09
