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

拼搏现实的明天。 2022-10-11 13:40 240阅读 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 条评论,240人围观)

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

相关阅读