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

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

news 2025/7/9 11:37:45

一、两列布局

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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端，它允许HTTP与Elasticsearch 集群通信，而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点轻量级&#xff…...

编程新知 2025/6/23 4:26:10

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...

编程新知 2025/7/8 7:50:09

智慧医疗能源事业线深度画像分析（上）

引言医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

编程新知 2025/7/9 7:16:49

＜6＞-MySQL表的增删查改

目录一，create（创建表） 二，retrieve（查询表） 1，select列 2，where条件三，update（更新表） 四，delete（删除表&#xf…...

编程新知 2025/7/7 8:38:21

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中，我们可能会遇到一些流式数据处理的场景，比如接收来自上游接口的 Server-Sent Events（SSE） 或流式 JSON 内容，并将其原样中转给前端页面或客户端。这种情况下，传统的 RestTemplate 缓存机制会…...

编程新知 2025/6/21 9:48:10

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...

编程新知 2025/6/27 7:16:49

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现，展示如何创建和管理多个 OkHttpClient 实例，分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/6/20 19:09:22