如何使用 CSS Grid 实现文本与地图并排布局

老婷君_3802

发布时间：2026-05-31 19:36:25

796人浏览过

来源于php中文网

原创

如何使用 CSS Grid 实现文本与地图并排布局

本文介绍如何通过 CSS Grid 布局将段落（）与 Google Maps 地图（）水平并排显示，解决传统 padding-right 或 flex 误用导致的布局错乱问题，并提供响应式增强方案。

本文介绍如何通过 css grid 布局将段落（`

`）与 google maps 地图（``）水平并排显示，解决传统 `padding-right` 或 `flex` 误用导致的布局错乱问题，并提供响应式增强方案。

在您的原始代码中，p 元素设置了过大的 padding-right: 950px 并错误地启用了 display: flex，这不仅无法实现真正的并排定位，还会挤压内容、破坏文档流，且影响后续元素（如

和）的自然排列。而 #Mappa 未设置任何定位规则，仅靠 HTML 顺序堆叠，必然垂直排列于段落下方。<p>✅ 推荐方案：<strong>语义清晰 + 布局可控的 CSS Grid</strong></p> <p>将 <article> 设为网格容器，定义两列——左侧容纳所有文字内容（<h1>、</h1> <p>、</p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/skill11112" title="CSS工具箱(专业版)"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="CSS工具箱(专业版)" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)">CSS工具箱(专业版)</a> <p>全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。</p> </div> <a href="/xiazai/skill11112" title="CSS工具箱(专业版)" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <h3>），右侧固定放置地图。无需修改 HTML 结构，即可精准控制布局流向：</h3></article></p><pre class="brush:php;toolbar:false;">.pagina_Homepage p { padding-left: 5px; /* 移除无效的 padding-right 和 display: flex / } article { display: grid; / 左列自适应内容宽度，右列占剩余空间（更灵活）/ grid-template-columns: 1fr 400px; / 或 minmax(min-content, 1fr) 2fr / gap: 1rem; / 可选：添加间距提升可读性 / } #Mappa { border: solid black 2px; width: 100%; / 确保填满右列 / height: 300px; / 显式指定位于第二列，首行起始 / grid-column: 2; grid-row: 1; }</pre><p>⚠️ 注意事项：</p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <ul> <li> <strong>避免硬编码像素值</strong>：950px 在小屏幕下会溢出。推荐使用 1fr（弹性占比）或 minmax() 函数（如 minmax(300px, 1fr))）提升响应性；</li> <li> <strong>grid-row: 1 / 100 不必要</strong>：只要地图是 <article> 内唯一需跨行的元素，且其他内容按默认流排列，grid-row: 1 即可；若需跨多行（如地图需覆盖标题+段落高度），可用 grid-row: 1 / -1（延伸至最后一行）；</article> </li> <li> <strong>兼容性保障</strong>：CSS Grid 支持所有现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+），无需前缀；</li> <li> <strong>无障碍友好</strong>：保持 HTML 语义顺序（文字在前、地图在后），屏幕阅读器仍按逻辑流读取，符合 WCAG 标准。</li> </ul> <p>? 进阶建议：若项目需强响应性，可结合媒体查询动态调整列数：</p><pre class="brush:php;toolbar:false;">@media (max-width: 768px) { article { grid-template-columns: 1fr; / 移动端堆叠 */ } #Mappa { height: 200px; } }</pre><p>最终效果：段落与地图严格左右并置，不干扰其他 <article> 内元素位置，HTML 结构零侵入，CSS 可维护性强，且天然支持未来扩展（如添加联系表单、营业时间等同级模块）。</article></p>

Bootstrap 5 导航栏折叠动画失效的排查与修复指南

如何实现响应式且速度恒定的现代 CSS 滚动字幕（Marquee）

Nginx root与alias怎么在 location 中使用 root 指令

CSS3伪类与伪元素在BEM规范中应该怎样书写选择器？

如何解决移动端Safari中CSS touch-action失效问题

相关标签:

css

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：如何在 CSS Flexbox 中实现始终不换行的 4 列响应式布局下一篇：如何在 PHP Session 多语言切换中保持当前页面不跳转

作者最新文章

如何正确解析含空格的命令字符串以构建 os/exec.Command 结构体

2026-11-01 16:20

如何在 Laravel 中通过复选框实现数据库中“Yes/No”双值切换

2026-11-01 16:21

Python 中 return 语句后代码不可达问题详解与修复指南

2026-11-01 16:37

Vue 组件命名规范与模板复用最佳实践

2026-11-01 16:37

如何在 Laravel 表单中正确处理复选框的双值（Yes/No）提交

2026-11-01 16:38

如何正确使用 PHP Cookie 实现性别与年龄双重条件的鞋类图片筛选

2026-11-01 16:38

如何在 Python 类继承中正确实现默认属性值的传递与重载

2026-11-01 16:39

如何在 Laravel 中通过复选框实现数据库中 Yes/No 值的双向切换

2026-11-01 16:41

如何在 Python 类继承中正确实现默认属性值的传递与覆盖

2026-11-01 16:42

如何将带索引的字段名（如 field[0]）自动归并为数组值

2026-11-01 16:47

热门AI工具

蛙蛙写作 Hot

一款AI论文写作工具，主要用于超级AI智能写作助手，适合需要提升相关任务效率的用户。

AI文本写作中文写作

墨刀AI Hot

一款AI图像与设计工具，主要用于产品经理的专属智能体，适合需要提升相关任务效率的用户。

AI设计工具 Agent智能体

PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

AI视频创作视频生成

立刻MV Hot

立刻MV是一款AI文本写作工具，AI 音乐视频（MV）创作工具。

AI视频创作

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

AI编程开发 AI聊天问答

Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

AI文本写作

音述AI Hot

一款AI音频处理工具，主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区，适合需要提升相关任务效率的用户。

AI音频制作音乐创作

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

AI编程开发 AI大模型

WorkBuddy

一款AI办公效率工具，主要用于腾讯云推出的AI原生桌面智能体工作台，适合需要提升相关任务效率的用户。

AI办公学习 Agent智能体

相关专题

css

css是层叠样式表，用来表现HTML或XML等文件样式的计算机语言，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容，供大家免费下载使用。

5256

2023.06.15

css居中

css居中：1、通过“margin: 0 auto; text-align: center”实现水平居中；2、通过“display:flex”实现水平居中；3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容，供大家免费下载体验。

1137

2023.07.27