Layui快速入门之第二节布局容器(固定宽度与完整宽度)

10月前作者：渊婉分类：Toy博客阅读(53) 违法举报

这篇具有很好参考价值的文章主要介绍了Layui快速入门之第二节布局容器(固定宽度与完整宽度)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

目录

一：固定宽度

二：完整宽度

一：固定宽度

将栅格放入一个带有 class="layui-container" 的特定容器中，以便在小屏幕以上的设备中固定宽度，让列可控(两侧有留白效果)

  <!--固定宽度(两侧有留白效果)-->
    <div className="layui-container" style="background-color:navajowhite;height: 300px">
        固定宽度
    </div>

测试效果：

Layui快速入门之第二节布局容器(固定宽度与完整宽度),Layui,layui,前端,javascript

二：完整宽度

不固定容器宽度，将栅格或其它元素放入一个带有 class="layui-fluid"的容器中，那么宽度将不会固定，而是 100% 适应

 <!--完整宽度(占据屏幕的100%)-->
      <div class="layui-fluid" style="background-color:yellow;height: 300px">
          完整宽度
      </div>

测试效果：

Layui快速入门之第二节布局容器(固定宽度与完整宽度),Layui,layui,前端,javascript 文章来源地址https://www.toymoban.com/news/detail-709390.html

到了这里，关于Layui快速入门之第二节布局容器(固定宽度与完整宽度)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

[数论第二节]欧拉函数/快速幂/扩展欧几里得算法

欧拉函数 (varphi(N)) : 1-N中与N互质的数的个数若 (N = p_1^{a_1} · p_2^{a_2} · p_3^{a_3} ··· ·p_n^{a_n}) 其中p为N的所有质因子则 (varphi(N) = N(1-frac{1}{p_1})(1-frac{1}{p_2})···(1-frac{1}{p_n})) 证明：互质：两数的公共因子只有1 去掉所有与N有(大于1的)公共因子的数，剩下的数就是与

2024年02月14日
浏览(50)
【Git 入门教程】第二节、Git基础使用

Git是一个分布式版本控制系统，它可以帮助开发者更好地管理和维护代码。在本文中，我们将介绍Git的最基本操作，如安装Git、初始化仓库、添加文件、提交代码、查看记录等。 1.下载要使用Git，首先需要在计算机上安装Git。本文以Windows 10 为环境进行讲解。官网地址为：

2023年04月26日
浏览(44)
《Pytorch新手入门》第二节-动手搭建神经网络

参考《深度学习框架PyTorch：入门与实践_陈云(著)》代码链接：https://github.com/chenyuntc/pytorch-book 神经网络是机器学习中的一种模型，是一种模仿动物神经网络行为特征，进行分布式并行信息处理的算法数学模型。这种网络依靠系统的复杂程度，通过调整内部大量节点之间相互

2024年02月05日
浏览(44)
【Python零基础学习入门篇②】——第二节：Python的常用语句

⬇️⬇️⬇️⬇️⬇️⬇️ ⭐⭐⭐Hello，大家好呀我是陈童学哦，一个普通大一在校生，请大家多多关照呀嘿嘿😁😊😘 🌟🌟🌟 技术这条路固然很艰辛，但既已选择，该当坚毅地走下去，加油！ 🌤️PUA： ” 你所看到的惊艳都曾平庸历练 **“**🚀🚀🚀 🍉🍉🍉 最后让我

2024年02月04日
浏览(39)
第二节：基础入门-Web 应用&架构搭建&漏洞&HTTP 数据包&代理服务器

基础入门-Web 应用架构搭建漏洞HTTP 数据包代理服务器 #网站搭建前置知识域名，子域名，DNS，HTTP/HTTPS，证书等购买一台服务器，填完信息之后，会有两个内外网地址，这两个地址就是内部地址和公网地址得到公网地址后可以用xshell或远程桌面管理连接这台服务器，这里我们

2024年02月19日
浏览(41)
Element UI Container 布局容器布满全屏, 头部和侧边栏固定 el-main可滚动

一、Element UI Container 布局容器布满全屏： 1、需要给包裹的div一个height：100% 2、给#app,html,body,.el-container一个height：100% 3、给el-container设置direction=\\\"vertical\\\"，因为包含main和footer 二、头部和侧边栏固定 el-main可滚动给内容区域的container加样式 ** height: calc(100vh - 头部的高度);

2024年02月11日
浏览(37)
链表之第二回

欢迎来到我的：世界该文章收入栏目：链表希望作者的文章对你有所帮助，有不足的地方还请指正，大家一起学习交流 ! 对于我来说这个博客是一个学习的地方，就像我的上篇文章一样，有老铁们的支持，陪伴；我很满足，这个栏目我会继续坚持下去，108回，就像我的108难

2024年02月12日
浏览(36)
harmonyOS基础（三）- 快速弄懂HarmonyOS ArkTs基础组件、布局容器（前端视角篇）

大家好！我是黑臂麒麟，一位6年的前端；随着鸿蒙4.0 的发布。鸿蒙社区不断壮大，且市场对 harmonyOS 应用认可度越来越高。很多公司开始对鸿蒙应用开发越来越重视。之前想入坑鸿蒙，一直犹豫未下定决心学习。这次不再等待，开始系统学习起来。此系列文章只做 harm

2024年02月20日
浏览(47)
第二章（第二节）：无穷小量和函数

若 lim f(x) = 0 ，则称函数 f(x) 当 x → x 0 时是无穷小量，简称：无穷小。 x→ x 0 定理1. 有限多个无穷小量的代数和仍是无穷小量定理2. 有限多个无穷小量的积也是无穷小量定理3.常数与无穷小量的积也是无穷小量定理4.有界变量与无穷小量的积是无穷小量当 x→

2024年02月08日
浏览(53)
第二节 LwIP简介

本专栏使用的是LwIP 2.1.2版本，官方下载链接：http://savannah.nongnu.org/projects/lwip/。本专栏以LwIP 2. 1.2 为主要对象进行讲解，后续中出现的LwIP 如果没有特殊声明，均指2.1.2 版本。此时的LwIP 2. 1.2 为最新版本，可能当这本书写完的时候，LwIP 又被更新了，对于学习而言，大家其实

2024年02月03日
浏览(42)