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 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%;
}
还没有评论,来说两句吧...