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

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

news 文章来源：https://blog.csdn.net/CH040708/article/details/143376497 2025/5/17 17:42:47

一、两列布局

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

C++《list的模拟实现》

在上一篇C《list》专题当中我们了解了STL当中list类当中的各个成员函数该如何使用，接下来在本篇当中我们将试着模拟实现list，在本篇当中我们将通过模拟实现list过程中深入理解list迭代器和之前学习的vector和string迭代器的不同，接下来就开始…...

编程日记 2024/11/6 5:02:30

Kubernetes的概述与架构

Kubernetes 的概述 Kubernetes 是一个可移植、可扩展的开源平台，用于管理容器化的工作负载和服务，方便进行声明式配置和自动化。Kubernetes 拥有一个庞大且快速增长的生态系统，其服务、支持和工具的使用范围广泛。 Kubernetes 这个名字源于…...

编程日记 2024/11/6 5:01:29

Elasticsearch实战应用：构建高效的全文搜索引擎

Elasticsearch实战应用：构建高效的全文搜索引擎在当今信息爆炸的时代，如何快速、准确地从海量数据中检索出所需信息成为了企业和开发者面临的重要挑战。Elasticsearch作为一款开源的分布式搜索引擎，凭借其强大的全文搜索、实时分析和可扩展…...

编程日记 2024/11/6 5:00:28

达梦数据库和人大金仓数据库对数据库的运行查看情况

1、查看服务器自身资源使用情况查看内存： free -g 查看整体负载: top 查看磁盘io ： iostat -d -x 1 2、查看数据库占用服务器内存情况,登录DM管理工具，达梦数据库使用的内存大致等于 BUFFER MPOOL，对应的 SQL 语句为&#xff1a…...

编程日记 2024/11/6 4:56:24

Spring Boot解决 406 错误之返回对象缺少Getter/Setter方法引发的问题

目录前言1. 问题背景2. 问题分析2.1 检查返回对象 3. 解决方案3.1 确保Controller返回Result类型3.2 测试接口响应 4. 原理探讨5. 常见问题排查与优化建议结语前言在Spring Boot开发中，接口请求返回数据是系统交互的重要环节，尤其在开发RESTful风格的…...

编程日记 2024/11/6 4:55:23