html table line-height,html - Line-height does not seem to work inside a table cell - Stack Overflow

拼搏现实的明天。 2022-10-11 13:40 169阅读 0赞

There's different ways to achieve the look of that pic. I'll provide you with an example to get started.

I prefer using position: absolute since it's much easier to arrange N boxes in 1 container. Sometimes, it might be pretty impossible without using it. position: absolute fixes the element div to the parent element .container.

So by setting the .letter to top: 0 and left: 0 , it positions it starting at the top left. But you want the letter to expand the whole container like in your pic. So to do that we can simply add bottom: 0 to force it to stretch the whole way.

HTML:

A

1

2

3

CSS:

.container \{

position: relative;

width: 300px;

height: 300px;

background: silver; //remove this to make it white like in your pic

\}

.letter \{

position: absolute;

left: 0;

top: 0;

width: 80%;

bottom: 0;

display: inline-block;

border: 1px solid black;

font-size: 248px;

text-indent: 30px;

\}

.number \{

position: absolute;

right: 0;

width: 19%;

height: 33%;

border: 1px solid black;

font-size: 60px;

text-indent: 15px;

\}

.one \{

top: 0;

\}

.two \{

top: 33%;

\}

.three \{

top: 66%;

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，169人围观）

还没有评论，来说两句吧...

相关阅读

相关【异常】TDengine Fail to get table info, error: Table does not exist / Database not specified

一、异常 TDEngine时报错: SQL 错误 []:TDengine ERROR (80002662): Fail to get table info, e

古城微笑少年丶/ 2024年02月23日 07:15/ 0 赞/ 40 阅读

相关 layui table is not a valid module

目录 layui表格不是有效的模块错误原因解决方案 1. 检查模块导入 2. 检查模块依赖 3. 更新layui框架 4. 清除缓存和重新编译资源 5. 寻

绝地灬酷狼/ 2024年02月17日 11:27/ 0 赞/ 12 阅读

相关 why does dp not work?

新的体会：本题的本质，是有环的图，应选择bfs，而非dfs(或者自顶向下的dp)。如果是无环的，两者都可行在leetcode上刷到一题，很有趣，值得一记：[1091. Sh

ゞ浴缸里的玫瑰/ 2023年10月05日 14:08/ 0 赞/ 42 阅读

相关 html table line-height,html - Line-height does not seem to work inside a table cell - Stack Overflow

There's different ways to achieve the look of that pic. I'll provide you with an example

拼搏现实的明天。/ 2022年10月11日 13:40/ 0 赞/ 170 阅读

相关 php fpdf html,php - HTML/FPDF Table - Stack Overflow

I am working on printing this report to pdf: ![NLfM3.png][] But all I get is this: ![

墨蓝/ 2022年10月07日 00:43/ 0 赞/ 147 阅读

相关 HTML input textbox with a width of 100% overflows table cells

1. input\[type="text"\] \{ 2. width: 100%; 3. box-sizing: border-box; 4. \-webkit-bo

绝地灬酷狼/ 2022年10月02日 03:59/ 0 赞/ 99 阅读

相关 Qt: This does not seem to be a "Debug"build 解决办法

问题：在用Qt Creator调试程序时，可能会弹出下面的对话框。 ![这里写图片描述][70] 问题：编译器选择的是MingW，调试器却选择了CDB。MingW应该和G

野性酷女/ 2022年05月24日 05:52/ 0 赞/ 186 阅读

相关 ReactNative android overflow:hidden does not work

笔者最近在进行公司项目的迭代开发遇到一个问题，就是，在Android端设置了view的宽高，并设置了view的style属性overflow：hidden，发现内部的view会

柔光的暖阳◎/ 2022年03月02日 09:22/ 0 赞/ 148 阅读

相关 Mysql - add a column to a table if not exists

在mysql中我们可以在create table之前判断这个table是不是已经存在，如果已经存在则不创建，从而避免报错。但是mysql并没有提供原生的方法在添加一个列之

迈不过友情╰/ 2022年02月28日 00:08/ 0 赞/ 301 阅读

相关 display:table-cell

一、display:table-cell属性简述 `display:table-cell`属性指让标签元素以表格单元格的形式呈现，类似于`td`标签。目前IE8+以及其他

落日映苍穹つ/ 2021年10月30日 01:06/ 0 赞/ 293 阅读