一个容器与其他容器不同，因为单词长度不同。

huangapple
go评论93阅读模式
英文:

One container is different from the others bacause of the word length

问题

我想要使所有这些容器都相等，但由于我认为最后一个容器（"CAMISAS"）的字数较短，所以最后一个容器的表现有些奇怪，无法将括号中的数字放在与其他容器相同的位置。那么，我该如何解决这个问题？

英文:

I want to make all these containers equal, but for some reason - that I believe it is because of the word length of the last container ("CAMISAS") that is shorter compared to the others container - the last container is acting strangely, in a way that I can't put the number in parentheses in the same position as it is in the other containers. So, how can I solve it?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .category-items-box {
  2.     padding: 40px;
  3.     display: grid;
  4.     grid-template-columns: repeat(auto-fit,minmax(200px,260px));
  5.     gap: 34px;
  6. }
  8. .category-item {
  9.     display: flex;
  10.     padding: 12px 21px;
  11.     border-radius: 9px;
  12.     border: 1px solid hsl(0, 0%, 85%);
  13.     gap: 10px;
  14. }
  16. .category-img {
  17.     background-color: var(--cultured);
  18.     border: 1px solid hsl(0, 0%, 80%);
  19.     border-radius: 9px;
  20.     padding: 10px;
  21.     width: 30px;
  22.     height: 30px;
  23. }
  24.   
  25. .category-content {
  26.     display: flex;
  27. }
  29. .title-category {
  30.     margin-top: 8px;
  31.     margin-bottom: -14px;
  32.     font-size: 14px;
  33.     font-family: &#39;Poppins&#39;, Arial, Helvetica, sans-serif;
  34.     white-space: nowrap; 
  35. }
  36. .quantity-category {
  37.     font-size: 11px;
  38.     color: hsl(0, 0%, 47%);
  39.     transform: translateX(19px);
  40. }
  41. .category-btn {
  42.     color: hsl(353, 100%, 78%);
  43.     font-size: 0.78rem;
  44.     font-weight: 600;
  45.     font-family: &#39;Poppins&#39;, Arial, Helvetica, sans-serif;
  46.     text-decoration: none;
  47.     
  49. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;category&quot;&gt;
  2.         &lt;div class=&quot;category-container&quot;&gt;
  3.             &lt;div class=&quot;category-items-box&quot;&gt;
  4.                 &lt;div class=&quot;category-item&quot;&gt;
  5.                     &lt;div class=&quot;category-img&quot;&gt;
  6.                         &lt;img class=&quot;image&quot; src=&quot;https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/dress.svg&quot; alt=&quot;foto de um vestido&quot;&gt;
  7.                     &lt;/div&gt;
  8.                     &lt;div class=&quot;category-texts&quot;&gt;
  9.                         &lt;div class=&quot;category-content&quot;&gt;
  10.                             &lt;h3 class=&quot;title-category&quot;&gt;VESTIDO &amp; ROUPA&lt;/h3&gt;
  11.                             &lt;p class=&quot;quantity-category&quot;&gt;(53)&lt;/p&gt;
  12.                         &lt;/div&gt;
  13.                         &lt;a href=&quot;#&quot; class=&quot;category-btn&quot;&gt;Mostrar Tudo&lt;/a&gt;
  14.                     &lt;/div&gt;
  15.                     
  16.                 &lt;/div&gt;
  17.                 &lt;div class=&quot;category-item&quot;&gt;
  18.                     &lt;div class=&quot;category-img&quot;&gt;
  19.                         &lt;img src=&quot;https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/glasses.svg&quot; alt=&quot;foto de um &#243;culus&quot;&gt;
  20.                     &lt;/div&gt;
  21.                     &lt;div class=&quot;category-texts&quot;&gt;
  22.                         &lt;div class=&quot;category-content&quot;&gt;
  23.                             &lt;h3 class=&quot;title-category&quot;&gt;&#211;CULOS &amp; LENTES&lt;/h3&gt;
  24.                             &lt;p class=&quot;quantity-category&quot;&gt;(22)&lt;/p&gt;
  25.                         &lt;/div&gt;
  26.                         &lt;a href=&quot;#&quot; class=&quot;category-btn&quot;&gt;Mostrar Tudo&lt;/a&gt;
  27.                     &lt;/div&gt;
  28.                 &lt;/div&gt;
  29.                 &lt;div class=&quot;category-item&quot;&gt;
  30.                     &lt;div class=&quot;category-img&quot;&gt;
  31.                         &lt;img src=&quot;https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/shorts.svg&quot; alt=&quot;foto de uma cal&#231;a jeans&quot;&gt;
  32.                     &lt;/div&gt;
  33.                     &lt;div class=&quot;category-texts&quot;&gt;
  34.                         &lt;div class=&quot;category-content&quot;&gt;
  35.                             &lt;h3 class=&quot;title-category&quot;&gt;SHORTS &amp; JEANS&lt;/h3&gt;
  36.                             &lt;p class=&quot;quantity-category&quot;&gt;(64)&lt;/p&gt;
  37.                         &lt;/div&gt;
  38.                         &lt;a href=&quot;#&quot; class=&quot;category-btn&quot;&gt;Mostrar Tudo&lt;/a&gt;
  39.                     &lt;/div&gt;
  40.                 &lt;/div&gt;
  41.                 &lt;div class=&quot;category-item&quot;&gt;
  42.                     &lt;div class=&quot;category-img&quot;&gt;
  43.                         &lt;img src=&quot;https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/tee.svg&quot; alt=&quot;camisa&quot;&gt;
  44.                     &lt;/div&gt;
  45.                     &lt;div class=&quot;category-texts&quot;&gt;
  46.                         &lt;div class=&quot;category-content&quot;&gt;
  47.                             &lt;h3 class=&quot;title-category&quot;&gt;CAMISAS&lt;/h3&gt;
  48.                             &lt;p class=&quot;quantity-category&quot;&gt;(10)&lt;/p&gt;
  49.                         &lt;/div&gt;
  50.                         &lt;a href=&quot;#&quot; class=&quot;category-btn&quot;&gt;Mostrar Tudo&lt;/a&gt;
  51.                     &lt;/div&gt;
  52.                 &lt;/div&gt;
  53.                 &lt;/div&gt;
  54.                 
  55.             &lt;/div&gt;
  56.         &lt;/div&gt;
  57.     &lt;/div&gt;

<!-- end snippet -->

答案1

得分: 1

因为您在.category-item上设置了display:flex，.category-texts变成了一个弹性项目，占据了适合其内容的最小宽度。所以，您的布局是基于文本长度的。

您可以通过添加.category-texts{ flex-basis:100% }来修复这个问题，以使其占据所有可用的宽度，并在.category-content上设置justify-content: space-between。

我还进行了一些其他小的更改。

英文:

Because you have set a display:flex on .category-item, .category-texts is becoming a flex item taking the minimum width that fits its content. So yeah, the layout you have there is based on the text length.

You could fix this with .category-texts{ flex-basis:100% }, so it takes all the available width, and set justify-content: space-between on .category-content.

I also made some other small changes:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .category-items-box {
  2.   padding: 40px;
  3.   display: grid;
  4.   grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
  5.   gap: 34px;
  6. }
  8. .category-item {
  9.   display: flex;
  10.   padding: 12px 21px;
  11.   border-radius: 9px;
  12.   border: 1px solid hsl(0, 0%, 85%);
  13.   gap: 10px;
  14. }
  16. .category-texts{ flex-basis:100% }
  18. .category-img {
  19.   background-color: var(--cultured);
  20.   border: 1px solid hsl(0, 0%, 80%);
  21.   border-radius: 9px;
  22.   padding: 10px;
  23.   width: 30px;
  24.   height: 30px;
  25.   flex-shrink:0;
  26. }
  28. .category-content {
  29.   display: flex;
  30.   justify-content: space-between;
  31.   gap:19px;
  32. }
  34. .title-category {
  35.   margin-top: 8px;
  36.   margin-bottom: -14px;
  37.   font-size: 14px;
  38.   font-family: &quot;Poppins&quot;, Arial, Helvetica, sans-serif;
  39.   white-space: nowrap;
  40. }
  41. .quantity-category {
  42.   font-size: 11px;
  43.   color: hsl(0, 0%, 47%);
  45. }
  46. .category-btn {
  47.   color: hsl(353, 100%, 78%);
  48.   font-size: 0.78rem;
  49.   font-weight: 600;
  50.   font-family: &quot;Poppins&quot;, Arial, Helvetica, sans-serif;
  51.   text-decoration: none;
  52. }

<!-- language: lang-html -->

  1. &lt;div class=&quot;category&quot;&gt;
  2.         &lt;div class=&quot;category-container&quot;&gt;
  3.             &lt;div class=&quot;category-items-box&quot;&gt;
  4.                 &lt;div class=&quot;category-item&quot;&gt;
  5.                     &lt;div class=&quot;category-img&quot;&gt;
  6.                         &lt;img class=&quot;image&quot; src=&quot;https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/dress.svg&quot; alt=&quot;foto de um vestido&quot;&gt;
  7.                     &lt;/div&gt;
  8.                     &lt;div class=&quot;category-texts&quot;&gt;
  9.                         &lt;div class=&quot;category-content&quot;&gt;
  10.                             &lt;h3 class=&quot;title-category&quot;&gt;VESTIDO &amp; ROUPA&lt;/h3&gt;
  11.                             &lt;p class=&quot;quantity-category&quot;&gt;(53)&lt;/p&gt;
  12.                         &lt;/div&gt;
  13.                         &lt;a href=&quot;#&quot; class=&quot;category-btn&quot;&gt;Mostrar Tudo&lt;/a&gt;
  14.                     &lt;/div&gt;
  15.                     
  16.                 &lt;/div&gt;
  17.                 &lt;div class=&quot;category-item&quot;&gt;
  18.                     &lt;div class=&quot;category-img&quot;&gt;
  19.                         &lt;img src=&quot;https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/glasses.svg&quot; alt=&quot;foto de um &#243;culus&quot;&gt;
  20.                     &lt;/div&gt;
  21.                     &lt;div class=&quot;category-texts&quot;&gt;
  22.                         &lt;div class=&quot;category-content&quot;&gt;
  23.                             &lt;h3 class=&quot;title-category&quot;&gt;&#211;CULOS &amp; LENTES&lt;/h3&gt;
  24.                             &lt;p class=&quot;quantity-category&quot;&gt;(22)&lt;/p&gt;
  25.                         &lt;/div&gt;
  26.                         &lt;a href=&quot;#&quot; class=&quot;category-btn&quot;&gt;Mostrar Tudo&lt;/a&gt;
  27.                     &lt;/div&gt;
  28.                 &lt;/div&gt;
  29.                 &lt;div class=&quot;category-item&quot;&gt;
  30.                     &lt;div class=&quot;category-img&quot;&gt;
  31.                         &lt;img src=&quot;https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/shorts.svg&quot; alt=&quot;foto de uma cal&#231;a jeans&quot;&gt;
  32.                     &lt;/div&gt;
  33.                     &lt;div class=&quot;category-texts&quot;&gt;
  34.                         &lt;div class=&quot;category-content&quot;&gt;
  35.                             &lt;h3 class=&quot;title-category&quot;&gt;SHORTS &amp; JEANS&lt;/h3&gt;
  36.                             &lt;p class=&quot;quantity-category&quot;&gt;(64)&lt;/p&gt;
  37.                         &lt;/div&gt;
  38.                         &lt;a href=&quot;#&quot; class=&quot;category-btn&quot;&gt;Mostrar Tudo&lt;/a&gt;
  39.                     &lt;/div&gt;
  40.                 &lt;/div&gt;
  41.                 &lt;div class=&quot;category-item&quot;&gt;
  42.                     &lt;div class=&quot;category-img&quot;&gt;
  43.                         &lt;img src=&quot;https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/tee.svg&quot; alt=&quot;camisa&quot;&gt;
  44.                     &lt;/div&gt;
  45.                     &lt;div class=&quot;category-texts&quot;&gt;
  46.                         &lt;div class=&quot;category-content&quot;&gt;
  47.                             &lt;h3 class=&quot;title-category&quot;&gt;CAMISAS&lt;/h3&gt;
  48.                             &lt;p class=&quot;quantity-category&quot;&gt;(10)&lt;/p&gt;
  49.                         &lt;/div&gt;
  50.                         &lt;a href=&quot;#&quot; class=&quot;category-btn&quot;&gt;Mostrar Tudo&lt;/a&gt;
  51.                     &lt;/div&gt;
  52.                 &lt;/div&gt;
  53.                 &lt;/div&gt;
  54.                 
  55.             &lt;/div&gt;
  56.         &lt;/div&gt;
  57.     &lt;/div&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年5月6日 21:12:43
  • 转载请务必保留本文链接：https://go.coder-hub.com/76189087.html
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定