0 0 4 6 - 三叉戟布局【主流布局】,Web密训营,Web开发,鱼C论坛

不二如是 发表于 2017-2-10 13:26:01

0 0 4 6 - 三叉戟布局【主流布局】

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

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

B格从左至右，逐步提高！

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

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

因为好用牛x阿！

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

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

脑洞到此，言归正传{:10_288:} 。

三叉戟布局，就是多项等高布局，废话不多说，上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css"></style>
</head>
</head>
<body>
<div id="container">
<div class="sanchaji">
<img src="1.png">
<h1>HTML</h1>
<p>主流网页的文件后缀名</p>
</div>
<div class="sanchaji">
<img src="2.png">
<h1>C、C++</h1>
<p>基于C语言家族的常用文件后缀</p>
</div>
<div class="sanchaji">
<img src="3.png">
<h1>Python</h1>
<p>Json，当下鱼C最火的语言</p>
</div>
</div>
</body>
</html>
效果图：

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

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

修改基本样式，形成三叉戟外形：
#container{
width: 100%;
}
.sanchaji{
width: 33.33%;
float: left;
text-align: center;
box-sizing: border-box;
padding:22px;
color: #FFF;
background:#99BBFF;
}
.sanchaji img{
width: 33%;
margin-top: 33px;
}
</style>
效果图：

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

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

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

为了区分三列，用伪类选择器分别添加背景色：
.sanchaji:nth-child(1){
background: #FF3EFF;
}
.sanchaji:nth-child(3){
background: #FFB3FF;
}
效果图：

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

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

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

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

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

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

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

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

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

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

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

你不能让每个人都很少，索性让每个人都很多！
.sanchaji{
padding-bottom: 666px;
}
效果图：

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

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

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

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

设置负的底部内边距，就类似抵消作用：
.sanchaji{
padding-bottom: 666px;
margin-bottom: -366px;
}
效果图：

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

这就是为什么我要：

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

让自己学会360度，四维般的思考问题！

没错，我要打广告了！

推荐阅读：0018-＃你是三维人，不要老把观念停在一维，好不～

又要扯远了，收！

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

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

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

只有产生这种效果后，使用overflow:hidden才会裁剪掉多余的像素
#container{
overflow: hidden;
}
效果图：

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

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

这位鱼油，如果喜欢本帖子，请订阅专辑-->（传送门）（不喜欢更要订阅{:10_278:} ）

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

shishunfu 发表于 2017-5-2 16:05:16

交作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style type="text/css">
#container {
width: 100%;
overflow: hidden;
/*overflow 属性规定当内容溢出元素框时发生的事情。
使用overflow:hidden才会裁剪掉多余的像素*/
}

.sanchaji{
width: 33.33%;
float: left;
text-align: center;
box-sizing: border-box;
padding: 22px 22px 366px 22px;
color: #FFF;
background-color: #99BBFF;
margin-bottom: -166px;
}

.sanchaji img {
width: 33%;
margin-top: 33px;
}
.sanchaji:nth-child(1){
background: #FF3EFF;
}
.sanchaji:nth-child(3){
background: #FFB3FF;
}
</style>
</head>
<body>
<div id="container">
<div class="sanchaji">
<img src="p5.png">
<h1>HTML</h1>
<p>主流网页的文件后缀名</p>
</div>
<div class="sanchaji">
<img src="p6.png">
<h1>C、C++</h1>
<p>基于C语言家族的常用文件后缀</p>
</div>
<div class="sanchaji">
<img src="p7.png">
<h1>Python</h1>
<p>Json，当下鱼C最火的语言</p>
</div>
</div>
</body>
</html>

aswyamato1989 发表于 2017-7-25 07:32:58

交作业！

小苏鱿鱼2 发表于 2018-10-26 09:47:05

虽然字数不一样，但是没有变行，三叉戟高度还是一样的

考拉熊 发表于 2018-10-28 22:46:15

学习一下··

睁眼睡大觉 发表于 2019-3-27 16:09:57

这个操作好骚啊{:10_279:}

你在意在便在 发表于 2019-11-1 16:56:15

支持不二~~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#container {
   width:100%;
   overflow: hidden;
   /* 隐藏溢出的部分 */
}
.sanchaji {
   width:33.33%;
   float:left;
   text-align:center;
   box-sizing:border-box;
   padding:20px;
   color:#34495e;
   /* background:#7f8c8d; */
   padding-bottom:666px;
   margin-bottom:-566px;
}
.sanchaji:nth-child(1) {
   background: #e74c3c;
}
.sanchaji:nth-child(2) {
   background: #e67e22;
}
.sanchaji:nth-child(3) {
   background: #f1c40f;
}
</style>
</head>
</head>
<body>
   <div id="container">
            <div class="sanchaji">
                     <img src="html.png">
                     <h1>HTML</h1>
                     <p>主流网页的文件后缀名</p>
            </div>
            <div class="sanchaji">
                     <img src="c.png">
                     <h1>C、C++</h1>
                     <p>基于C语言家族的常用文件后缀</p>
            </div>
            <div class="sanchaji">
                     <img src="json.jpg">
                     <h1>Python</h1>
                     <p>Json，当下鱼C最火的语言</p>
            </div>
   </div>
</body>
</html>

suweixuan1998 发表于 2020-1-9 16:01:52

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>做一个，再做一个</title>
<style type="text/css">
#container{

width: 100%;
overflow: hidden;
}
.sanchaji{
width: 33.33%;
float: left;
text-align: center;
box-sizing: border-box;
padding: 22px;
color: #FFF;
background: #99BBFF;
padding-bottom: 666px;
margin-bottom: -366px;

}
.sanchaji img{
width: 66%;
margin-top: 33px;

}
.sanchaji:nth-child(1){
background: #FF3EFF;

}
.sanchaji:nth-child(3){
background: #FFB3FF;

}

</style>

</head>
<body>
<div id="container">
<div class="sanchaji">
<img src="1.jpg">
<h1>图一</h1>
<p>只是风景！</p>
</div>
<div class="sanchaji">
<img src="3.jpg">
<h1>正图</h1>
<p>白莲大法好！</p>
</div>
<div class="sanchaji">
<img src="2.jpg">
<h1>图二</h1>
<p>还是风景！</p>
</div>

</div>
</body>

</html>

小脑斧 发表于 2020-3-15 15:52:12

1041556532 发表于 2020-5-29 23:50:10

交作业啦

页: [1]

鱼C论坛's Archiver

0 0 4 6 - 三叉戟布局【主流布局】