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

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

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

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

x

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

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

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

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

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

因为好用牛x阿！

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

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

脑洞到此，言归正传

。

三叉戟布局，就是多项等高布局，废话不多说，上代码：

<!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，上述过程就像裁剪过程。

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

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

）

官方 Web 课程：

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

这个操作好骚啊

你在意在便在 · 发表于 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

交作业啦

账号		自动登录	找回密码
密码			立即注册

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

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

评分

本帖被以下淘专辑推荐:

点评