当前位置：首页 > news >正文

CSS中常见的两列布局、三列布局、百分比和多行多列布局！

news 2025/9/18 2:27:29

一、两列布局

1、前言：

2. 两列布局的常见用法

两列布局的元素示例：

代码运行后如下：

二、三列布局

1.前言

2. 三列布局的常见用法

三列布局的元素示例：

代码运行后如下：

三、多行多列

1.前言

2，多行多列布局的常见用法

多行多列布局的元素示例：

四、百分比布局

代码运行后如下：

五、综合练习

代码运行后如下：

# 实现两列布局有多种方法，这里我会介绍几种常见的技术，包括浮动、<Flexbox>和<Grid>布局。#

一、两列布局

1、前言：

两列布局都有固定的长度，从内容上区分主要内容和侧边栏。页面布局整体上分为上、中、下3个部分，即header区域、container区域和footer区域。
container又包含mainBox（主要内容区域）和sideBox区域（侧边栏）

2. 两列布局的常见用法

两列布局的元素示例：

<!DOCTYPE html>  
<html lang="zh">  <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>典型的网页结构示例:带横向导航栏</title>  <style>nav ul{height:30px;  /*给父盒设置高度，避免高度塌陷影响其他兄弟盒*/background-color: aquamarine;}nav ul li{margin-right: 20px;float:left;}#contact{width: 220px;height: 160px;background-color: pink;border: 2px black solid;position: fixed;left:1200px;top:450px;}main{width: 1604px;}aside{           width: 35%;height: 450PX;background-color: green;float: right;}article{/* width:100% */width: 65%;height: 450px;background-color: gray;float: left;}footer{width: 1600px;height: 50px;background-color:blue;/* float: left; */border: 2px black solid;}</style>
</head>  <body>  <header>  <h1 align="center">广东云浮中医药职业学院</h1>  <p align="center">欢迎来到: <ins>计算机学院</ins></p>  <hr> <nav>  <ul type="none">  <li><a href="#">首页</a></li>  <li><a href="#">关于我们</a></li>  <li><a href="#">学生风采</a></li>  <li><a href="#">联系方式</a></li>  </ul>  </nav>  </header>  <hr>  <main>  <section>  <article>  <h3>文章标题</h3>  <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  <br><br><br><img src="./img_src/云中医校徽.jpg" alt="文章配图" width="200" height="200">  <p>想了解广东云浮中医药职业学院：<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  </article>  <aside>  <h3>侧边栏</h3>  <p>侧边栏内容，如快速链接、广告等。</p>  <table border="1">  <tr>  <th>专业</th>  <th>链接</th>  </tr>  <tr>  <td>计算机应用技术</td>  <td><a href="专业A详情页.html">专业A详情</a></td>  </tr>  <tr>  <td>数字媒体技术</td>  <td><a href="专业B详情页.html">专业B详情</a></td>  </tr>  </table>  </aside>  </section>  <section id="contact">  <h4>联系我们</h4>  <form>  姓名:<input type="text" id="name" name="name"><br>  邮箱:<input type="email" id="email" name="email"><br>  <input type="submit" value="提交">  </form>  </section>  <div style="clear: both;"></div></main>  <footer>  <p>版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p>  </footer>  </body>  </html>

代码运行后如下：

二、三列布局

1.前言

三列布局由3个独立的而成，仅比两列布局多了一项内容，最终是基于两列布局结构演变出来。
页面布局整体上分为上、中、下3个部分，即header区域、container区域和footer区域。
container又包含mainBox（主要内容区域）、SubsideBox（次要内容区）、sideBox区域（侧边栏）

2. 三列布局的常见用法

三列布局的元素示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>section{width: 1600px;height: 1000px;}#div1{width: 15%;height: 800px;background-color: rgb(224, 169, 41);float: left;}#div2{width: 23%;height: 800px;background-color: rgb(26, 114, 237);float: right;}#div3{width: 60%;height: 800px;background-color:rgb(186, 239, 71);margin-left: 16%;margin-right: 15%;float: none;}</style>
</head>
<body><section><div id="div1">盒子1</div><div id="div2">盒子2</div><div id="div3">盒子3</div></section> </body>
</html>

代码运行后如下：

三、多行多列

1.前言

多行多列常见于页面主要内容区域使用，将页面内容分成多行和多列的方式排列。
常用于<float>元素设置，float：left 、 float：right,使元素向左移，向右移。

2，多行多列布局的常见用法

多行多列布局的元素示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>section{width: 90%;height: 50%;border: 4px black solid;background-color: gray;position: absolute;}div{width: 15%;height: 100px;background-color: aqua;border: 5px solid #000;margin-bottom: 5px;float: left;margin-right: 2%;margin-top: 2%;}</style>
</head>
<body><section class="class_ele"> <div id="div1">盒子1</div><div id="div2">盒子2</div><div id="div3">盒子3</div><div id="div4">盒子4</div><div id="div5">盒子5</div><div id="div1">盒子6</div><div id="div2">盒子7</div><div id="div3">盒子8</div><div id="div4">盒子9</div><div id="div5">盒子10</div></section> <!-- <footer>网页页脚</footer> --></body>
</html>

代码运行后如下：

四、百分比布局

在自适应网页设计中常见百分比布局，同个页面可以根据屏幕大小，自动调整内容布局。
百分比用法：例如 width：100% 、height : 100

<!DOCTYPE html>  
<html lang="zh">  <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>网页布局综合练习</title>  <style>      #div1{background-image: url(./top.jpg);background-size: 100%;height: 150PX;}#img1{position: relative;top: 20px;left: 100px;}#b{position: relative;left: 350px;bottom: 50%;}#img2{position: relative;left: 200px ;bottom: 20px;}</style></head>  <body>  <header>  <section class="container1"><div id="div1"><img  id= "img1" src="./logo.png" alt="" width="650PX" height="150PX"><b id="b">计算机学院</b> <img id="img2" src="./logo2.png" alt=""></div></section></header>  <nav> </nav><main><section></section></main>   <footer></footer>
</body>  </html>

代码运行后如下：

五、综合练习

1、综合练习案例分析

综合练习包含了三列布局，多行多列布局的结合。

<!DOCTYPE html>  
<html lang="zh">  <head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>网页布局综合练习</title>  <style>      #div1{background-image: url(./top.jpg);background-size: 100%;height: 150PX;}#img1{position: relative;top: 20px;left: 100px;}#b{position: relative;left: 350px;bottom: 50%;}#img2{position: relative;left: 200px ;bottom: 20px;}#div2{position: relative;}nav ul{height:30px;background-color:rgb(21, 67, 21);} nav ul li{margin-right: 20px;float:left;}.clear_ele a:link{color: rgb(189, 232, 232);}.clear_ele a:visited{color: azure;}#aside-left{float: left;width: 20%;height: 850px;background-color: rgb(30, 163, 30);}   #aside-right{float: right;width: 20%;height: 850px;background-color:rgb(30, 163, 30) ;} article{width: 60%;height: 850Px;background-color: gray;float: left;}.clear_ele img{list-style: none;width: 20%;height: 200px;border: 2px solid red;margin-right: 2%;margin-bottom: 2%;}.container3{width: 220px;height: 160px;background-color: pink;border: 2px black solid;position: fixed;right:235px;bottom: 10%;}  footer{width: 100%;height: 50px;background-color:rgb(78, 209, 78);float: left;}</style></head>  <body>  <header>  <section class="container1"><div id="div1"><img  id= "img1" src="./logo.png" alt="" width="650PX" height="150PX"><b id="b">计算机学院</b> <img id="img2" src="./logo2.png" alt=""></div></section></header>  <nav>  <ul class="clear_ele">  <li><a href="https://gdyfvccm.edu.cn/">学校首页</a></li>  <li><a href="#">学院概况</a></li>  <li><a href="#">机构设置</a></li>  <li><a href="#">院系专业</a></li>  <li><a href="#">教学科研</a></li>  <li><a href="#">信息公开</a></li>  <li><a href="#">招生就业</a></li></ul>  </nav> <main>  <section class="container2 clear_ele">  <aside id="aside-left">  学院新闻</aside><aside id="aside-right">  友情链接</aside> <article>文章  <ul class="clear_ele">  <br><br><br><br><br><br><br><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""><img src="./photo2.jpg" alt=""></ul></article> </section>  <section class="container3">  <h4>联系我们</h4>  <form>  姓名:<input type="text" id="name" name="name"><br>  邮箱:<input type="email" id="email" name="email"><br>  <input type="submit" value="提交">  </form>  </section> </main>  <footer>  <p>版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p>  </footer>  </body>  </html>

代码运行后如下：

总结:CSS样式的使用可以让代码更加简洁和结构化，使站点的访问和维护更加容易。

CSS中常见的两列布局、三列布局、百分比和多行多列布局！

目录一、两列布局 1、前言： 2. 两列布局的常见用法两列布局的元素示例： 代码运行后如下： 二、三列布局 1.前言 2. 三列布局的常见用法三列布局的元素示例： 代码运行后如下： 三、多行多列 1.前言 2&…...

编程日记 2024/11/6 5:27:56

GaussDB Ustore存储引擎解读

目录一、数据库存储引擎二、GaussDB Ustore存储引擎总结本文将介绍GaussDB中的Ustore存储引擎，包括Ustore的设计背景、特点介绍和适用业务场景等。一、数据库存储引擎数据库的存储引擎负责在内存和磁盘上存储、检索和管理数据，确保每个节点的…...

编程日记 2024/11/6 5:26:56

JAVA基础：数组（习题笔记）

一，编码题 1，数组查找操作：定义一个长度为10 的一维字符串数组，在每一个元素存放一个单词；然后运行时从命令行输入一个单词，程序判断数组是否包含有这个单词，包含这个单词就打印出“Yes”&…...

编程日记 2024/11/6 5:23:52

VMWARE ESXI VMFS阵列故障服务器数据恢复

1：河南用户一台DELL R740 3块2.4T硬盘组的RAID5，早期坏了一个盘没有及时更换，这次又坏了一个，导致整组RAID5处于数据丢失的状态， 2：该服务器装的是VMware ESXI 6.7，用户把3块硬盘寄过来进行数据…...

编程日记 2024/11/6 5:21:50

实时金融股票数据API接口websocket接入方法

一、使用websocket的协议提升传输速度实时金融股票数据对于投资者和交易员来说至关重要。通过使用WebSocket接入方法，可以轻松获取实时金融股票类数据并及时做出决策。WebSocket是一种高效的双向通信协议，它允许数据的实时推送，避免了不断的…...

编程日记 2024/11/6 5:20:49

机器学习与成像技术

机器学习与成像技术在科技日新月异的今天，机器学习与成像技术的结合正引领着智能视觉领域进入一个全新的发展阶段。这一结合不仅推动了图像识别、目标检测、视频分析等领域的快速发展，还深刻影响着医疗、安防、自动驾驶等多个行业。本文将从机器学习与…...

编程日记 2024/11/6 5:19:48

【系统架构设计师】预测试卷一：综合知识（75道选择题）

更多内容请见：备考系统架构设计师-专栏介绍和目录文章目录【第1题】【第2题】【第3题】【第4题】【第5~6题】【第7题】【第8~10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17~18题】【第19~20题】【第21~22题】【第23~24题】【第25~26题】【第2…...

编程日记 2024/11/6 5:18:48

【addRepository 在tomcat 8和tomcat 9的支持情况】

项目中涉及将远程下载的 jar包进行解密后加载到 tomcat 容器中。 File jarFile new File(fileUrl); String jarFileUrl jarFile.toURI().toURL().toString(); WebappClassLoader webLoader (WebappClassLoader) classLoader; webLoader.addRepository(jarFileUrl);在升级到 …...

编程日记 2024/11/6 5:17:46

2024网鼎杯web1+re2 wp

这两道题属于比较简单的，顺道说一下，今年的题有点抽象，web不是misc，re不是web的，也有可能时代在进步，现在要求全栈✌了吧 web1 最开始被强网的小浣熊带偏思路了，进来疯狂找sql注入&#xff0c…...

编程日记 2024/11/6 5:16:45

Python 自动化运维：安全与合规最佳实践

Python 自动化运维：安全与合规最佳实践目录 🔒 Python安全编程实践与最佳实践🔑 使用Hashlib与Cryptography进行数据加密📊 安全审计与合规检查的重要性🔍 处理敏感数据与隐私保护的方法 1. 🔒 Python安…...

编程日记 2024/11/6 5:15:44

I2S、PDM、PCM、TDM、DSM、DCODEC、VAD、SPDIF

I2S (Inter-IC Sound) 用途: 一种用于芯片之间传输音频数据的串行总线标准。特点: 常用于高质量音频设备，如DAC、ADC和音频编解码器。I2S主要传输PCM格式的音频数据。PDM (Pulse Density Modulation) 用途: 主要用于数字麦克风等设备，以简化硬件接口。特点: 使用脉冲密度来编…...

编程日记 2024/11/6 5:14:43

关于我的编程语言——C/C++——第四篇（深入1）

（叠甲：如有侵权请联系，内容都是自己学习的总结，一定不全面，仅当互相交流（轻点骂）我也只是站在巨人肩膀上的一个小卡拉米，已老实，求放过） 字符类型介绍 char…...

编程日记 2024/11/6 5:13:42

2025年上半年软考高级科目有哪些？附选科指南

新手在准备报考软考时，都会遇到这样的一个问题——科目这么多，我适合考什么？2025上半年软考高级有哪些科目可以报考？要想知道自己适合报什么科目，就需要了解每个科目是什么，考什么等一系列的问题&#xff0…...

编程日记 2024/11/6 5:12:41

线上查企业该用哪家平台？

在销售领域，经常会遇到电话接通率低的问题。这可能是因为许多电话号码来源于某些商业信息平台，这些号码可能已经被代账公司使用，或者已经被同行业多次联系过，导致接通率不高。为了解决这一问题，可以采用数据过滤服务&a…...

编程日记 2024/11/6 5:10:39

Metrix：实现CI服务器上的DORA指标自动化计算

本文还有配套的精品资源，点击获取简介：Metrix项目是一个Go语言编写的工具，旨在自动化计算DevOps效能的关键指标——DORA指标，这些指标包括部署频率、前置时间、平均恢复时间和变更失败率。它通过集成到CI服务器如Jenkins或GitH…...

编程日记 2024/11/6 5:09:38

【STL_list 模拟】——打造属于自己的高效链表容器

一、list节点 list是一个双向循环带头的链表，所以链表节点结构如下： template<class T>struct ListNode{T val;ListNode* next;ListNode* prve;ListNode(int x){val x;next prve this;}};二、list迭代器 2.1、list迭代器与vector迭代器区别…...

编程日记 2024/11/6 5:08:36

Java 基础教学：高级特性与实战-集合框架

Java 集合框架提供了一套性能优良、使用方便的接口和类，用于存储和操作群组数据。最常用的集合接口有 List、Set 和 Map。 List List 接口可以存储一系列有序的元素，并且可以包含重复的元素。List 的实现类常用的有 ArrayList 和 LinkedList。 ArrayL…...

编程日记 2024/11/6 5:07:35

单片机原理及应用笔记：C51数组与项目实践

作者介绍刘滋瑞，男，银川科技学院计算机与人工智能学院，2022级计算机与科学技术8班本科生，单片机原理及应用课程第九组。指导老师：王兴泽电子邮箱：602054774qq.com 前言本篇文章是参考《单片机原理…...

编程日记 2024/11/6 5:06:34

综合项目--博客

一。基础配置： 1.配置主机名，静态IP地址 2.开启防火墙配置 3.部分开启selinux并且配置 4.服务器之间使用同ntp.aliyun.com进行世家能同步 5.服务器之间实现SSH绵密登陆二。业务需求 1.Sever-NFS-DNS主机配置NFS服务器，将博客网站资源…...

编程日记 2024/11/6 5:05:33

ARM64的Mac Node.js前置工作，nvm在线安装

1，通过终端 ping raw.githubusercontent.com 获取到ip地址185.199.110.133 2，终端输入sudo vi /etc/hosts，打开hosts文件 3，在最后添加 185.199.110.133 raw.githubusercontent.com 保存后退出 3.1，清除环境完全…...

编程日记 2024/11/6 5:04:32

docker详细操作--未完待续

docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...

编程新知 2025/9/17 9:50:31

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现题目链接：3576. Transform Array to All Equal Elements 1. 解题思路这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局：PCB行业的时代之问在数字经济蓬勃发展的浪潮中，PCB（印制电路板）作为 “电子产品之母”，其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透，PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/9/17 0:12:47

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出：JavaScript 中的 window.crypto.getRandomValues() 方法在现代 Web 开发中，随机数的生成看似简单，却隐藏着许多玄机。无论是生成密码、加密密钥，还是创建安全令牌，随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/9/13 21:35:53

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中，我们会遇到使用 java 调用 dll文件的情况，此时大概率出现UnsatisfiedLinkError链接错误，原因可能有如下几种类名错误包名错误方法名参数错误使用 JNI 协议调用，结果 dll 未实现 JNI 协…...

编程新知 2025/8/21 6:35:28

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/8/21 16:44:19