【学习css3】使用flex和grid实现等高元素布局

过往的实现方法是使用浮动加计算布局来实现，当flex和grid问世时，这一切将变得简单起来

一、简单的两列实现

1、先看页面效果

2、css代码

    .container {padding: 10px;width: 100ch;margin: 0 auto;box-shadow: inset 0 0 0 2px #ccc;}.column {margin: 20px;background-color: #ccc;padding: 10px;}.flexbox {display: flex;}.grid {display: grid;grid-auto-flow: column;}

3、html代码

    <div class="container">flex布局</div><div class="container flexbox"><div class="column"><div class="element"><p> 松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div><div class="container">grid布局</div><div class="container grid"><div class="column"><div class="element"><p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div>

 二、每行放置3列，多出来的自动到下一行

1、还是先看页面效果

2、css代码

    .container {padding: 10px;width: 100ch;margin: 0 auto;box-shadow: inset 0 0 0 2px #ccc;}.column {margin: 20px;background-color: #ccc;padding: 10px;}.flexbox {display: flex;}.flexbox.col-3 {flex-wrap: wrap;}.flexbox.col-3 .column {margin: 0.5rem;width: calc((100% / 3) - 1rem);}.grid {display: grid;grid-auto-flow: column;}.grid.col-3 {grid-gap: 1rem;grid-template-columns: repeat(3, 1fr);grid-auto-flow: unset;}.grid.col-3 .column {margin: 0;}

3、html代码

<div class="container">flex布局</div><div class="container flexbox col-3"><div class="column"><div class="element"><p>flexbox col-3: 甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div><div class="column"><div class="element"><p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div><div class="container">grid布局</div><div class="container grid col-3"><div class="column"><div class="element"><p>grid col-3:甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div><div class="column"><div class="element"><p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div>

三、全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用flex和grid实现等高元素布局</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.container {padding: 10px;width: 100ch;margin: 0 auto;box-shadow: inset 0 0 0 2px #ccc;}.column {margin: 20px;background-color: #ccc;padding: 10px;}.flexbox {display: flex;}.flexbox.col-3 {flex-wrap: wrap;}.flexbox.col-3 .column {margin: 0.5rem;width: calc((100% / 3) - 1rem);}.grid {display: grid;grid-auto-flow: column;}.grid.col-3 {grid-gap: 1rem;grid-template-columns: repeat(3, 1fr);grid-auto-flow: unset;}.grid.col-3 .column {margin: 0;}</style>
</head>
<body><div class="container">flex布局</div><div class="container flexbox"><div class="column"><div class="element"><p> 松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div><div class="container">grid布局</div><div class="container grid"><div class="column"><div class="element"><p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div><div class="container">flex布局</div><div class="container flexbox col-3"><div class="column"><div class="element"><p>flexbox col-3: 甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div><div class="column"><div class="element"><p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div><div class="container">grid布局</div><div class="container grid col-3"><div class="column"><div class="element"><p>grid col-3:甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div><div class="column"><div class="element"><p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p></div></div><div class="column"><div class="element"><p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p></div></div></div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/873534.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【linux】kernel-trace

【linux】kernel-trace

文章目录 linux kernel trace配置trace内核配置trace接口使用通用配置Events配置Function配置Function graph配置Stack trace设置 跟踪器tracer功能描述 使用示例1.irqsoff2.preemptoff3.preemptirqsoff linux kernel trace 配置 源码路径&#xff1a; kernel/trace trace内…
阅读更多...
[Redis]典型应用——分布式锁

[Redis]典型应用——分布式锁

什么是分布式锁&#xff1f; 在一个分布式系统中&#xff0c;也会涉及到多个节点访问同一个公共资源的情况。此时就需要通过锁来做互斥控制&#xff0c;避免出现类似于"线程安全"的问题 举个例子&#xff0c;在平时抢票时&#xff0c;多个用户可能会同时买票&#…
阅读更多...
大语言模型-文本向量模型评估基准 MTEB

大语言模型-文本向量模型评估基准 MTEB

MTEB&#xff08;Massive Text Embedding Benchmark&#xff09; 涵盖112种语言的58个数据集&#xff0c;包含如下8种任务。 1、双语文本挖掘&#xff08;Bitext Mining&#xff09; 任务目标&#xff1a; 在双语语料库中识别语义等价的句子对。 任务描述&#xff1a; 输入…
阅读更多...
Nature子刊 | ATAC-seq、RNA-seq和蛋白组联合分析揭示脂质激活转录因子PPARα在肾脏代偿性肥大的作用机制

Nature子刊 | ATAC-seq、RNA-seq和蛋白组联合分析揭示脂质激活转录因子PPARα在肾脏代偿性肥大的作用机制

2023年6月&#xff0c;美国国立心肺血液研究所的研究团队在Nature Communications上发表题为“Signaling mechanisms in renal compensatory hypertrophy revealed by multi-omics”的文章&#xff0c;该研究通过在单侧肾切除的小鼠模型中使用多组学方法&#xff08;蛋白质组学…
阅读更多...
深入浅出WebRTC—NACK

深入浅出WebRTC—NACK

WebRTC 中的 NACK&#xff08;Negative Acknowledgment&#xff09;机制是实时通信中处理网络丢包的关键组件。网络丢包是常见的现象&#xff0c;尤其是在无线网络或不稳定连接中。NACK 机制旨在通过请求重传丢失的数据包来减少这种影响&#xff0c;从而保持通信的连续性和质量…
阅读更多...
Open3D 非线性最小二乘法拟合空间球

Open3D 非线性最小二乘法拟合空间球

目录 一、概述 1.1原理 1.2实现步骤 二、代码实现 2.1关键代码 2.1.1定义残差函数 2.1.2拟合球面 2.2完整代码 三、实现效果 3.1原始点云 3.2拟合后点云 3.3结果数据 前期试读&#xff0c;后续会将博客加入下列链接的专栏&#xff0c;欢迎订阅 Open3D点云算法与点…
阅读更多...
spark 动态资源分配dynamicAllocation

spark 动态资源分配dynamicAllocation

动态资源分配&#xff0c;主要是spark在运行中可以相对合理的分配资源。 初始申请的资源远超实际需要&#xff0c;减少executor初始申请的资源比实际需要少很多&#xff0c;增多executorSpark运行多个job&#xff0c;这些job所需资源有的多有的少&#xff0c;动态调整executor…
阅读更多...
GPT-4o 与 GPT-4o Mini：两者的区别和特点

GPT-4o 与 GPT-4o Mini：两者的区别和特点

在人工智能领域&#xff0c;OpenAI 的 GPT 系列模型一直处于技术前沿。最近&#xff0c;OpenAI 发布了两个版本的模型&#xff1a;GPT-4o 和 GPT-4o Mini。这两个模型虽然都属于 GPT-4 系列&#xff0c;但在应用和性能上有一些显著的差异。本文将深入探讨这两个模型的不同之处。…
阅读更多...
Automation Anywhere推出新一代AI+自动化企业系统，助力企业实现10倍商业增长

Automation Anywhere推出新一代AI+自动化企业系统，助力企业实现10倍商业增长

RPA厂商纷纷进军AI Agent ( AI 代理)领域&#xff0c;陆续推出创新产品。最近&#xff0c;Automation Anywhere宣布推出其新的AI 自动化企业系统&#xff0c;该系统结合AI和自动化技术&#xff0c;以实现指数级的业务成果。 在Imagine 2024大会上首次亮相的这款新产品&#xf…
阅读更多...
前端实现视频播放添加水印

前端实现视频播放添加水印

一、效果如下 二、代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Document</title> </head> <body><style>.container {position: relative;}.base {width: 300px;hei…
阅读更多...
鸿蒙开发StableDiffusion绘画应用

鸿蒙开发StableDiffusion绘画应用

Stable Diffusion AI绘画 基于鸿蒙开发的Stable Diffusion应用。 Stable Diffusion Server后端代码 Stable Diffusion 鸿蒙应用代码 AI绘画 ​ 使用Axios发送post网络请求访问AI绘画服务器 api &#xff0c;支持生成图片保存到手机相册。后端服务是基于flaskStable Diffusion …
阅读更多...
ACM中国图灵大会专题 | 图灵奖得主Manuel Blum教授与仓颉团队交流 | 华为论坛：面向全场景应用编程语言精彩回顾

ACM中国图灵大会专题 | 图灵奖得主Manuel Blum教授与仓颉团队交流 | 华为论坛：面向全场景应用编程语言精彩回顾

ACM 中国图灵大会&#xff08;ACM Turing Award Celebration Conference TURC 2024&#xff09;于2024年7月5日至7日在长沙举行。本届大会由ACM主办&#xff0c;in cooperation with CCF&#xff0c;互联网之父Vinton Cerf、中国计算机学会前理事长梅宏院士和廖湘科院士担任学术…
阅读更多...
移动端如何离线使用GPT

移动端如何离线使用GPT

在移动端离线使用GPT&#xff0c;只需要一个app&#xff1a;H2O AI Personal GPT 是H2OAI上架的一款app&#xff0c;可离线使用&#xff0c;注重数据隐私&#xff0c;所有数据都只存储在本地。对H2OAI感兴趣的伙伴&#xff0c;可移步&#xff1a;https://h2o.ai 该app支持的模…
阅读更多...
Intel和AMD用户再等等！微软确认Win11 24H2年底前登陆

Intel和AMD用户再等等！微软确认Win11 24H2年底前登陆

微软近日确认&#xff0c;Windows 11 24H2版本将于2024年底前正式登陆使用英特尔和AMD处理器的PC。 根据微软介绍&#xff0c;Windows 11 24H2将作为传统功能更新&#xff0c;将在今年晚些时候提供给所有设备。 此前&#xff0c;微软已向搭载骁龙X Plus和X Elite系列处理器的Co…
阅读更多...
作为爬虫工程师，在封装API时如何做得更好

作为爬虫工程师，在封装API时如何做得更好

在数据驱动的时代&#xff0c;爬虫工程师的角色日益重要。他们不仅是数据的收集者&#xff0c;更是数据的桥梁构建者&#xff0c;通过编写高效、稳定的爬虫程序&#xff0c;将互联网上的海量信息转化为有价值的数据集。而在这一过程中&#xff0c;API&#xff08;应用程序接口&…
阅读更多...
esp8266模块（1）

esp8266模块（1）

1WiFi的两种模式 1AP模式&#xff1a;ESP8266模块充当一个无线接入点&#xff0c;类似于一个路由器。&#xff08;如手机开热点&#xff09; 2Station模式&#xff08;sta&#xff09;&#xff1a;ESP8266模块作为客户端连接到一个现有的WiFi网络。&#xff08;如路由器&#…
阅读更多...
阿里云服务器 篇五：短链服务网站

阿里云服务器 篇五：短链服务网站

文章目录 系列文章YOURLS安装步骤更新服务器安装Apache Web服务器安装MySQL安装PHP 8.3和必要的PHP 8.3扩展安装YOURLS使用YOURLS基本用法关于错误消息"Could not auto-encrypt passwords"改为中文语言提供公共使用页面当短链无效时，进行错误提示YOURLS 的 Bookmark…
阅读更多...
主流微调训练方法总结 LoRA、Adapter、Prefix-tuning、P-tuning、Prompt-tuning

主流微调训练方法总结 LoRA、Adapter、Prefix-tuning、P-tuning、Prompt-tuning

一文搞清楚LORA、Prompt Tuning、P-Tuning、Adapter 、Prefix等大模型微调方法 大模型主流微调训练方法总结 LoRA、Adapter、Prefix-tuning、P-tuning、Prompt-tuning 并训练自己的数据集 五万字综述&#xff01;Prompt-Tuning&#xff1a;深度解读一种新的微调范式
阅读更多...
深度剖析机构号矩阵系统：如何根据业务需求做出明智选择

深度剖析机构号矩阵系统：如何根据业务需求做出明智选择

在数字化营销的浪潮中&#xff0c;短视频平台如抖音、快手等已成为品牌传播和用户互动的重要渠道。为了更高效地管理这些平台的账号&#xff0c;机构号矩阵系统应运而生。本文将深度剖析机构号矩阵系统&#xff0c;并探讨如何根据业务需求做出明智的选择。 机构号矩阵系统概述…
阅读更多...
VBA中如何使用Edge内核Browser？

VBA中如何使用Edge内核Browser？

问题&#xff1a; 在微软宣布停止对IE的支持后&#xff0c;许多使用VBA中Web Browser的用户遇到了困境&#xff0c;因为Web Browser使用的IE内核。然而微软并没有给出支持Edge的新版Web Browser&#xff0c;网上许多第三方的库也不够完善。 解决方案&#xff1a; 经过调研&a…
阅读更多...
最新文章

Copyright @ 2022~2023