英文:
How can I make the text the same height as the box
问题
我有两个div框，我希望文本的高度与框一样高。
我尝试将字体大小和框高度都设置为2rem。显然，这不是让文本和框高度相同的方法。
英文:
I got the 2 div boxes and I want the text to be the same height as the box.
I tried setting 2rem for both the font-size and the box height. Obviously that is not how I make text and box the same height.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Grid starting point</title>
<style>
:root {
font-size: 1em;
}
.offer {
font-size: 2rem;
display: inline-block;
}
.box {
width: 2rem;
height: 2rem;
background-color: #990000;
display: inline-block;
}
</style>
</head>
<body>
<header>
<div class="offer">CARS FOR SALE</div>
<div class="box"></div>
</header>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
你可以使用 ::after 伪元素与 aspect-ratio 属性结合使用。
正如评论中所指出的那样，文本会增加父级 div 的高度（这总是有点烦人），所以你可以调整 line-height 和 font-size 以抵消这一效果。
.offer {
position: relative;
font-size: 2rem;
line-height: 1.5rem;
}
.offer::after {
content: "";
height: 100%;
aspect-ratio: 1 / 1;
background-color: #990000;
position: absolute;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Grid starting point</title>
</head>
<body>
<header>
<div class="offer">CARS FOR SALE</div>
</header>
</body>
</html>
注意：感谢 César Venzac 指出的这个 SO 链接 讨论了如何改变 line-height。
英文:
You could use an ::after pseudo-element combined with the aspect-ratio property.
As the comments point out, the text increases the parent div height (which is always a little annoying) so you can adjust the line-height and font-size in order to counter that.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.offer {
position: relative;
font-size: 2rem;
line-height: 1.5rem;
}
.offer::after {
content: "";
height: 100%;
aspect-ratio: 1 / 1;
background-color: #990000;
position: absolute;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>CSS Grid starting point</title>
</head>
<body>
<header>
<div class="offer">CARS FOR SALE</div>
</header>
</body>
</html>
<!-- end snippet -->
NOTE: Thanks to César Venzac for pointing out this SO link that discusses changing the line-height.
答案2
得分: 0
你可以使用 flexbox 来调整元素的位置，以适应它们的大小变化。
Html:
<div class="wrapper">
<div class="text">Size</div>
<div class="card-box"></div>
</div>
Css:
.wrapper {
/*background:#efefef;*/
display:flex;
margin:40px;
}
.wrapper .text {
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
/*background:rgb(242, 242, 245);*/
font-size:74px;
}
.wrapper .card-box {
width:60px;
height:60px;
background:#cecaca;
margin-left:40px;
}
取消注释以查看过程。
英文:
You could use flexbox to adjust the positioning of the elements as they resize.
Html:
<div class="wrapper">
<div class="text">Size</div>
<div class="card-box"></div>
</div>
Css:
.wrapper {
/*background:#efefef;*/
display:flex;
margin:40px;
}
.wrapper .text {
width:60px;
height:60px;
display:flex;
align-items:center;
justify-content:center;
/*background:rgb(242, 242, 245);*/
font-size:74px;
}
.wrapper .card-box {
width:60px;
height:60px;
background:#cecaca;
margin-left:40px;
}
Uncomment the css to see the process.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论