我怎么能做这样的布局呢?

enter image description here

基本上,
我在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与栅格布局的高度完全相同:

enter image description here

以下是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

有高度,有格子和弹性,就容易多了.

所以它需要像你看到的图像一样,但带有字体.

enter image description here

如你所见,与右边其他两个元素的高度是正确的.

示例代码(仅用于示例)

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>

推荐答案

以下是屏幕截图中您想要的结果的副本.此解决方案使用flex个属性来定位元素.将价格中的"EUR"和"0.49"组合到各自的div中并给它一个flex-column是有意义的.

@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;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 1em;
}

.date {
  margin-bottom: 1em;
}

.item {
  display: grid;
}

.right-side {
  display: flex;
  flex-flow: column;
}

.price-container {
  display: flex;
}

.second-price-container {
  display: grid;
  font-size: var(--small-font);
}

.currency {
  padding-left: 7px;
  font-weight: 300;
}

.currency,
.price-small {
  font-size: 1.6em;
}

.price-small {  
  font-weight: 500;
}

.price-big {
  font-size: calc(var(--small-font) * 5);
  font-weight: 600;
  line-height: 1;
}

.price-small::before {
  content: ".";
}

.item .date {
  color: blue;
}
<nav>
  <div class="item">
    <span class="date">Dom 07 Ago</span>
    <div class="price-container">
      <span class="price-big">33</span>
      <div class="right-side">
        <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">
      <span class="price-big">33</span>
      <div class="right-side">
        <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">
      <span class="price-big">33</span>
      <div class="right-side">
        <span class="currency">EUR</span>
        <span class="price-small">49</span>
      </div>
    </div>
  </div>
</nav>

Html相关问答推荐

如何使用html和css关键帧创建动画

未知高度正在应用于前标记

使用`<;use>;`与`<;img>;`时呈现的SVG大小不同

列表项文本在占据剩余空间之前在标记下换行

如何解决水平塌陷问题?

阴影部分内部的ionic Select 元素

如何使Bootstrap 5卡可点击

如何使用javascript在jsx中重复插入特殊字符?

在React中如何处理HTML本地日期输入?

为什么我的 div 元素没有形成一个圆形时钟?

您如何动态更改 Vue 中更高级别的标签的 CSS

在锥形渐变进度条内创建空白的问题

修复 Vue 3 Component 中的 CSS 以显示后面的 Select 器样式而无需 !important

CSS 中的 fingerprint scanner 动画