鱼C论坛

 找回密码
 立即注册
查看: 3280|回复: 10

[庖丁解牛] 0 0 4 6 - 三叉戟布局【主流布局】

[复制链接]
发表于 2017-2-10 13:26:01 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2021-8-11 09:30 编辑

到现在我们介绍过图文混排Hero Unit 图文混排双列图文混排格子布局

B格从左至右,逐步提高!


今天再来介绍个主流布局方式:多列布局

个人比较喜欢叫他“三叉戟布局”,为啥呢?

因为好用牛x阿!

你想想现实中用三叉戟来命名的都是很犀利的东西,像

“海神波塞冬、三叉戟巡航导弹、三叉戟反核系统。。。”


脑洞到此,言归正传

三叉戟布局,就是多项等高布局,废话不多说,上代码:
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css"></style>
  7. </head>
  8. </head>
  9. <body>
  10.         <div id="container">
  11.                 <div class="sanchaji">
  12.                         <img src="1.png">
  13.                         <h1>HTML</h1>
  14.                         <p>主流网页的文件后缀名</p>
  15.                 </div>
  16.                 <div class="sanchaji">
  17.                         <img src="2.png">
  18.                         <h1>C、C++</h1>
  19.                         <p>基于C语言家族的常用文件后缀</p>
  20.                 </div>
  21.                 <div class="sanchaji">
  22.                         <img src="3.png">
  23.                         <h1>Python</h1>
  24.                         <p>Json,当下鱼C最火的语言</p>
  25.                 </div>
  26.         </div>
  27. </body>
  28. </html>
复制代码

效果图:
Snip20170210_375.png


两层div嵌套,最外层1个div是id属性名为container的区块。

内层3个div代表三叉戟的每个戟,包含一张img、h1、p

修改基本样式,形成三叉戟外形:
  1.         #container{
  2.                         width: 100%;
  3.                 }
  4.                 .sanchaji{
  5.                         width: 33.33%;
  6.                         float: left;
  7.                         text-align: center;
  8.                         box-sizing: border-box;
  9.                         padding:22px;
  10.                         color: #FFF;
  11.                         background:#99BBFF;
  12.                 }
  13.         .sanchaji img{
  14.                         width: 33%;
  15.                         margin-top: 33px;
  16.                 }
  17.         </style>
复制代码

效果图:
Snip20170210_376.png


首先设置外层container的宽度100%,内层100/3=33.33%。

设置左浮动呈现三列效果,添加背景色,修改字体颜色为白色。

.sanchaji img{}设置图片宽度,顶高,视觉上更美观。

为了区分三列,用伪类选择器分别添加背景色:
  1.         .sanchaji:nth-child(1){
  2.                         background: #FF3EFF;
  3.                 }
  4.                 .sanchaji:nth-child(3){
  5.                         background: #FFB3FF;
  6.                 }
复制代码

效果图:
Snip20170210_378.png


为啥出现高度不同的问题了?

因为三叉戟布局中每一列文字内容长度都不同,导致高度也不同。

间接导致每一列背景色块参差不齐。。。

新问题又粗线了,如何解决这种狗啃似的尴尬设置呢?

全部设置成一样高度不就行了!

呵呵,少年,你想的挺简单。。。

你怎么可能提前预知这个不确定性的文本高度呢?

既然无法得到一个精确的高度值,大家一视同仁,肯定会带来更多问题。

换一种纬度看问题,由于每一列高度不确定,都会存在差异。

但是,差异本身不会太大,也就几十px之间。

直接设置一个超大的内边距padding-bottom,每一列全部增大,就像:

你不能让每个人都很少,索性让每个人都很多!

  1.         .sanchaji{
  2.                         padding-bottom: 666px;
  3.                 }
复制代码

效果图:
Snip20170210_380.png


现在每一列高度都是666px,直观上看,就好些了。

但是拉到最底下的边缘还是不整起,这会逼疯强迫症患者。

接下来就是见证“-px”的时刻到了!

如咱们预期300px的列高度就差不多了,那么增加到666px就多出了666-300=366px的高度。

设置负的底部内边距,就类似抵消作用:
  1.         .sanchaji{
  2.                         padding-bottom: 666px;
  3.                         margin-bottom: -366px;
  4.                 }
复制代码

效果图:
Snip20170210_381.png


虽然效果上还是没有变化,但是内部已经有了很奇妙的事情法发生了!

这就是为什么我要:

自觉洗脑、自觉培养思考的思考能了 - 批判性思维能了


让自己学会360度,四维般的思考问题!

没错,我要打广告了!

推荐阅读:0018-#你是三维人,不要老把观念停在一维,好不~

又要扯远了,收!

我们设置了一个底部外边距为负值-366px,外观上没变化。

但是实际使每一列的高度向上减少366px

就是让三个列显示是666px,但实际高度是300px。

只有产生这种效果后,使用overflow:hidden才会裁剪掉多余的像素
  1.         #container{
  2.                         overflow: hidden;
  3.                 }
复制代码

效果图:
Snip20170210_382.png


如果你用过Ps,上述过程就像裁剪过程。

删除没用的图像后,图像大小尺寸没有变,但是有多余的像素存在,使用裁剪就会清除掉多余的,


这位鱼油,如果喜欢本帖子,请订阅 专辑-->传送门)(不喜欢更要订阅


官方 Web 课程:

评分

参与人数 1荣誉 +5 鱼币 +5 贡献 +3 收起 理由
睦ちゃん她爹 + 5 + 5 + 3 感谢楼主无私奉献!

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2017-5-2 16:05:16 | 显示全部楼层
交作业
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>多列布局</title>
  6.         <style type="text/css">
  7.                 #container {
  8.                         width: 100%;
  9.                         overflow: hidden;
  10.                         /*overflow 属性规定当内容溢出元素框时发生的事情。
  11.                         使用overflow:hidden才会裁剪掉多余的像素*/
  12.                 }

  13.                 .sanchaji{
  14.                         width: 33.33%;
  15.                         float: left;
  16.                         text-align: center;
  17.                         box-sizing: border-box;
  18.                         padding: 22px 22px 366px 22px;
  19.                         color: #FFF;
  20.                         background-color: #99BBFF;
  21.                         margin-bottom: -166px;
  22.                 }

  23.                 .sanchaji img {
  24.                         width: 33%;
  25.                         margin-top: 33px;
  26.                 }
  27.                 .sanchaji:nth-child(1){
  28.                         background: #FF3EFF;
  29.                 }
  30.                 .sanchaji:nth-child(3){
  31.                         background: #FFB3FF;
  32.                 }
  33.         </style>
  34. </head>
  35. <body>
  36. <div id="container">
  37.         <div class="sanchaji">
  38.                 <img src="p5.png">
  39.                 <h1>HTML</h1>
  40.                 <p>主流网页的文件后缀名</p>
  41.         </div>
  42.         <div class="sanchaji">
  43.                 <img src="p6.png">
  44.                 <h1>C、C++</h1>
  45.                 <p>基于C语言家族的常用文件后缀</p>
  46.         </div>
  47.         <div class="sanchaji">
  48.                 <img src="p7.png">
  49.                 <h1>Python</h1>
  50.                 <p>Json,当下鱼C最火的语言</p>
  51.         </div>
  52. </div>
  53. </body>
  54. </html>
复制代码
0038多列布局.png

点评

我很赞同!: 5.0
我很赞同!: 5
  发表于 2017-5-2 21:11
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2017-7-25 07:32:58 | 显示全部楼层
交作业!
046.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-26 09:47:05 | 显示全部楼层
虽然字数不一样,但是没有变行,三叉戟高度还是一样的
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2018-10-28 22:46:15 | 显示全部楼层
学习一下··
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-27 16:09:57 | 显示全部楼层
这个操作好骚啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-11-1 16:56:15 | 显示全部楼层
支持不二~~
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <style type="text/css">
  7. #container {
  8.         width:100%;
  9.         overflow: hidden;
  10.         /* 隐藏溢出的部分 */
  11. }
  12. .sanchaji {
  13.         width:33.33%;
  14.         float:left;
  15.         text-align:center;
  16.         box-sizing:border-box;
  17.         padding:20px;
  18.         color:#34495e;
  19.         /* background:#7f8c8d; */
  20.         padding-bottom:666px;
  21.         margin-bottom:-566px;
  22. }
  23. .sanchaji:nth-child(1) {
  24.         background: #e74c3c;
  25. }
  26. .sanchaji:nth-child(2) {
  27.         background: #e67e22;
  28. }
  29. .sanchaji:nth-child(3) {
  30.         background: #f1c40f;
  31. }
  32. </style>
  33. </head>
  34. </head>
  35. <body>
  36.         <div id="container">
  37.                 <div class="sanchaji">
  38.                         <img src="html.png">
  39.                         <h1>HTML</h1>
  40.                         <p>主流网页的文件后缀名</p>
  41.                 </div>
  42.                 <div class="sanchaji">
  43.                         <img src="c.png">
  44.                         <h1>C、C++</h1>
  45.                         <p>基于C语言家族的常用文件后缀</p>
  46.                 </div>
  47.                 <div class="sanchaji">
  48.                         <img src="json.jpg">
  49.                         <h1>Python</h1>
  50.                         <p>Json,当下鱼C最火的语言</p>
  51.                 </div>
  52.         </div>
  53. </body>
  54. </html>
复制代码
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-9 16:01:52 | 显示全部楼层
  1. <!doctype html>
  2. <html>
  3. <head>
  4.                 <meta charset="utf-8">
  5.                 <title>做一个,再做一个</title>
  6.                 <style type="text/css">
  7.                                 #container{
  8.                                
  9.                                                 width: 100%;
  10.                                                 overflow: hidden;
  11.                                 }
  12.                                 .sanchaji{
  13.                                                 width: 33.33%;
  14.                                                 float: left;
  15.                                                 text-align: center;
  16.                                                 box-sizing: border-box;
  17.                                                 padding: 22px;
  18.                                                 color: #FFF;
  19.                                                 background: #99BBFF;
  20.                                                 padding-bottom: 666px;
  21.                                                 margin-bottom: -366px;
  22.                                
  23.                                 }
  24.                                 .sanchaji img{
  25.                                                 width: 66%;
  26.                                                 margin-top: 33px;
  27.                                
  28.                                 }
  29.                                 .sanchaji:nth-child(1){
  30.                                                 background: #FF3EFF;
  31.                                
  32.                                 }
  33.                                 .sanchaji:nth-child(3){
  34.                                                 background: #FFB3FF;
  35.                                
  36.                                 }
  37.                
  38.                 </style>

  39. </head>
  40. <body>
  41.                 <div id="container">
  42.                                 <div class="sanchaji">
  43.                                                 <img src="1.jpg">
  44.                                                 <h1>图一</h1>
  45.                                                 <p>只是风景!</p>
  46.                                 </div>
  47.                                 <div class="sanchaji">
  48.                                                 <img src="3.jpg">
  49.                                                 <h1>正图</h1>
  50.                                                 <p>白莲大法好!</p>
  51.                                 </div>
  52.                                 <div class="sanchaji">
  53.                                                 <img src="2.jpg">
  54.                                                 <h1>图二</h1>
  55.                                                 <p>还是风景!</p>
  56.                                 </div>
  57.                
  58.                 </div>
  59. </body>

  60. </html>
复制代码
4.jpg
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-3-15 15:52:12 | 显示全部楼层
*- 撸鉄2.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-5-29 23:50:10 | 显示全部楼层
交作业啦 TIM截图20200529234950.png
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-28 21:54

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表