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

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

news 2025/11/8 4:39: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、前言&#xff1a; 2. 两列布局的常见用法 两列布局的元素示例&#xff1a; 代码运行后如下&#xff1a; 二、三列布局 1.前言 2. 三列布局的常见用法 三列布局的元素示例&#xff1a; 代码运行后如下&#xff1a; 三、多行多列 1.前言 2&…...

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

GaussDB Ustore存储引擎解读

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

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

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

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

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

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

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

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

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

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

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

机器学习与成像技术

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

编程日记 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

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

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

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

Python 自动化运维&#xff1a;安全与合规最佳实践 目录 &#x1f512; Python安全编程实践与最佳实践&#x1f511; 使用Hashlib与Cryptography进行数据加密&#x1f4ca; 安全审计与合规检查的重要性&#x1f50d; 处理敏感数据与隐私保护的方法 1. &#x1f512; 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）

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

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

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

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

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

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

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

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

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

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

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

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

一、list节点 ​ list是一个双向循环带头的链表&#xff0c;所以链表节点结构如下&#xff1a; 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 集合框架提供了一套性能优良、使用方便的接口和类&#xff0c;用于存储和操作群组数据。最常用的集合接口有 List、Set 和 Map。 List List 接口可以存储一系列有序的元素&#xff0c;并且可以包含重复的元素。List 的实现类常用的有 ArrayList 和 LinkedList。 ArrayL…...

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

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

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

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

综合项目--博客

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

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

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

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

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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/11/7 9:53:19

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

编程新知 2025/9/7 11:32:34

8k长序列建模，蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

编程新知 2025/11/7 20:35:23

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2025/10/30 22:15:43

蓝桥杯 冶炼金属

原题目链接 &#x1f527; 冶炼金属转换率推测题解 &#x1f4dc; 原题描述 小蓝有一个神奇的炉子用于将普通金属 O O O 冶炼成为一种特殊金属 X X X。这个炉子有一个属性叫转换率 V V V&#xff0c;是一个正整数&#xff0c;表示每 V V V 个普通金属 O O O 可以冶炼出 …...

编程新知 2025/10/31 23:08:41

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2025/11/7 7:51:50

宇树科技，改名了！

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

编程新知 2025/11/2 9:39:34

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

编程新知 2025/10/30 11:52:17

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

编程新知 2025/11/7 19:43:09

前端高频面试题2：浏览器/计算机网络

本专栏相关链接 前端高频面试题1&#xff1a;HTML/CSS 前端高频面试题2&#xff1a;浏览器/计算机网络 前端高频面试题3&#xff1a;JavaScript 1.什么是强缓存、协商缓存&#xff1f; 强缓存&#xff1a; 当浏览器请求资源时&#xff0c;首先检查本地缓存是否命中。如果命…...

编程新知 2025/11/5 4:36:26