热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

是否可以创建跨越CSS网格中所有行的垂直文本?

如何解决《是否可以创建跨越CSS网格中所有行的垂直文本?》经验,为你挑选了1个好方法。

想要为网格创建一个节标题(而不是通过将其放在节上方来占据垂直空间),如下所示:

在此输入图像描述

当然很容易让第一列跨越行grid-rows: 1 / span 3但是如果我转换文本并对齐/对齐它,则div不占用列的整个空间,因此设置背景/边框看起来不正确.

见试用笔

body {
  padding: 1em;
  font-family: sans-serif;
}

.my-grid {
  display: grid;
  grid-template-columns: 2rem 100px 10rem;
  background-color: #eee
}

.my-grid>* {
  border: 1px solid #ccc;
}

.section-title {
  grid-row: 1 / span 5;
  align-self: center;
  justify-self: center;
  transform: rotate(270deg);
  background-color: papayawhip;
  text-transform: uppercase;
}

input {
  border: 2px solid #000;
}
Address
Address 1
Address 2
City
State
Zip Code



1> Paulie_D..:

是的,使用 writing-mode

写入模式CSS属性定义文本行是水平放置还是垂直放置以及块进展的方向.

MDN

body {
  padding: 1em;
  font-family: sans-serif;
}

.my-grid {
  display: grid;
  grid-template-columns: 2rem 100px 10rem;
  background-color: #eee
}

.my-grid>* {
  border: 1px solid #ccc;
}

.section-title {
  grid-row: 1 / span 5;
  text-align: center;
  writing-mode:vertical-rl; /* vertical text */
  line-height:2rem; /* center in div */
  transform:rotate(180deg); /* spin to orient as required */
  background-color: papayawhip;
  text-transform: uppercase;
}

input {
  border: 2px solid #000;
}
Address
Address 1
Address 2
City
State
Zip Code

推荐阅读
  • CSS3选择器的使用方法详解,提高Web开发效率和精准度
    本文详细介绍了CSS3新增的选择器方法,包括属性选择器的使用。通过CSS3选择器,可以提高Web开发的效率和精准度,使得查找元素更加方便和快捷。同时,本文还对属性选择器的各种用法进行了详细解释,并给出了相应的代码示例。通过学习本文,读者可以更好地掌握CSS3选择器的使用方法,提升自己的Web开发能力。 ... [详细]
  • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • 使用圣杯布局模式实现网站首页的内容布局
    本文介绍了使用圣杯布局模式实现网站首页的内容布局的方法,包括HTML部分代码和实例。同时还提供了公司新闻、最新产品、关于我们、联系我们等页面的布局示例。商品展示区包括了车里子和农家生态土鸡蛋等产品的价格信息。 ... [详细]
  • 本文整理了常用的CSS属性及用法,包括背景属性、边框属性、尺寸属性、可伸缩框属性、字体属性和文本属性等,方便开发者查阅和使用。 ... [详细]
  • 本文由编程笔记#小编为大家整理,主要介绍了logistic回归(线性和非线性)相关的知识,包括线性logistic回归的代码和数据集的分布情况。希望对你有一定的参考价值。 ... [详细]
  • 在Android开发中,使用Picasso库可以实现对网络图片的等比例缩放。本文介绍了使用Picasso库进行图片缩放的方法,并提供了具体的代码实现。通过获取图片的宽高,计算目标宽度和高度,并创建新图实现等比例缩放。 ... [详细]
  • 本文介绍了机器学习手册中关于日期和时区操作的重要性以及其在实际应用中的作用。文章以一个故事为背景,描述了学童们面对老先生的教导时的反应,以及上官如在这个过程中的表现。同时,文章也提到了顾慎为对上官如的恨意以及他们之间的矛盾源于早年的结局。最后,文章强调了日期和时区操作在机器学习中的重要性,并指出了其在实际应用中的作用和意义。 ... [详细]
  • 突破MIUI14限制,自定义胶囊图标、大图标样式,支持任意APP
    本文介绍了如何突破MIUI14的限制,实现自定义胶囊图标和大图标样式,并支持任意APP。需要一定的动手能力和主题设计师账号权限或者会主题pojie。详细步骤包括应用包名获取、素材制作和封包获取等。 ... [详细]
  • OpenCV4.5.0+contrib编译流程及解决错误方法
    本文介绍了OpenCV4.5.0+contrib的编译流程,并提供了解决常见错误的方法,包括下载失败和路径修改等。同时提供了相关参考链接。 ... [详细]
  • 为什么下一个5年,软件定义市场将暴涨32%
    Technavio公司的市场调研分析预测,到2020年全球软件定义一切(SDx)市场年复合增长率将超过32%,向虚拟化的转化是市场增长的主要驱动力。近来 ... [详细]
  • 前端开发工程师必读书籍有哪些值得推荐?我们直接进入代码复杂版式设置,如下所示,先写些标签,源码在这个链接里面:https://codepen.io/Shadid ... [详细]
  • LwebandStringTimeLimit:20001000MS(JavaOthers)MemoryLimit:6553665536K(JavaO ... [详细]
  • 本文讨论了如何使用Web.Config进行自定义配置节的配置转换。作者提到,他将msbuild设置为详细模式,但转换却忽略了带有替换转换的自定义部分的存在。 ... [详细]
  • 本文讨论了在dva中引入antd组件table时没有显示样式的问题。提供了.roadhogrc文件的配置,包括环境和import的设置。同时介绍了extraBabelPlugins和transform-runtime的使用方法,并解释了libraryName和css的含义。 ... [详细]
  • 本文介绍了使用readlink命令获取文件的完整路径的简单方法,并提供了一个示例命令来打印文件的完整路径。共有28种解决方案可供选择。 ... [详细]
author-avatar
手机用户新常态
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有