我怎么能做这样的布局呢?
基本上,
我在flexbox
个容器中有2个:
- 第一个文本为
"33"
- the second one is a grid container:
- 网格中的第一个是
"EUR"
- 网格中的第二个是
".49"
有了这个描述,我试着用下面的代码用HTML语言编写一个 struct
<nav>
<div class="item">
<span class="date">Dom 07 Ago</span>
<div class="price-container">
<div class="first-price-container">
<span class="price-big"> 371 </span>
</div>
<div class="second-price-container">
<span class="currency">EUR</span>
<span class="price-small"> 74 </span>
</div>
</div>
</div>
</nav>
我try 使用css来解决这个问题,但我得到的结果如下所示.完全不正确,因为我希望33与栅格布局的高度完全相同:
以下是css代码:
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
* {
box-sizing: border-box;
}
nav {
--small-font: 1rem;
font-family: poppins;
display: flex;
gap: 1rem;
/* space between copies of the container .item */
}
.item {
display: grid;
}
.price-container {
display: flex;
}
.second-price-container {
display: grid;
font-size: var(--small-font);
}
.price-big {
font-size: calc(var(--small-font) * 2);
/* I think that since the grid layout has two text with 1rem height, it will be 2rem (but not seems to work) */
font-weight: bold;
}
.price-small::before {
content: ".";
}
.item .date {
color: blue;
}
<nav>
<div class="item">
<span class="date">Dom 07 Ago</span>
<div class="price-container">
<div class="first-price-container">
<span class="price-big"> 37 </span>
</div>
<div class="second-price-container">
<span class="currency">EUR</span>
<span class="price-small"> 49 </span>
</div>
</div>
</div>
<div class="item">
<span class="date">Dom 07 Ago</span>
<div class="price-container">
<div class="first-price-container">
<span class="price-big"> 37 </span>
</div>
<div class="second-price-container">
<span class="currency">EUR</span>
<span class="price-small"> 49 </span>
</div>
</div>
</div>
<div class="item">
<span class="date">Dom 07 Ago</span>
<div class="price-container">
<div class="first-price-container">
<span class="price-big"> 37 </span>
</div>
<div class="second-price-container">
<span class="currency">EUR</span>
<span class="price-small"> 49 </span>
</div>
</div>
</div>
<!-- and soo on... repeatedly, however after I will find the correct structure, I will create a function in javascript that generate it -->
</nav>
在代码中,我认为如果我有两个元素,1rem为font-size
,
然后在右边,如果我在它旁边插入另一个文本,并且我写下1rem+1rem
,使其与网格布局的高度相同.
网格布局中的元素之间似乎没有正确的间隙.
而且,另一次try 是不是1rem+1rem
,我增加了很多,像1rem*5
,但问题仍然存在,
所以我认为,如果较大的字号增加,那么右边的另一个元素也会增加.
请帮帮忙,这在我看来并不明显.(因为这不会发生在Height属性中,只有字体大小错误时才会出现这种情况)
question:个
有没有计算font-size == height
的公式?这样我就可以在没有大量代码的情况下拥有像素完美的设计.
now I will add another code to tell you how I want it will be
有高度,有格子和弹性,就容易多了.
所以它需要像你看到的图像一样,但带有字体.
如你所见,与右边其他两个元素的高度是正确的.
示例代码(仅用于示例)
nav {
display: flex;
}
.item {
/* square */
height: 10rem;
width: 10rem;
display: flex;
}
.item>* {
flex: 1;
}
.another {
display: grid;
}
<nav>
<div class="item">
<div class="big" style="background-color: red;"></div>
<div class="another">
<div class="small" style="background-color: yellow;"></div>
<div class="small" style="background-color: green;"></div>
</div>
</div>
</nav>