英文:
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 -->
.category-items-box {
padding: 40px;
display: grid;
grid-template-columns: repeat(auto-fit,minmax(200px,260px));
gap: 34px;
}
.category-item {
display: flex;
padding: 12px 21px;
border-radius: 9px;
border: 1px solid hsl(0, 0%, 85%);
gap: 10px;
}
.category-img {
background-color: var(--cultured);
border: 1px solid hsl(0, 0%, 80%);
border-radius: 9px;
padding: 10px;
width: 30px;
height: 30px;
}
.category-content {
display: flex;
}
.title-category {
margin-top: 8px;
margin-bottom: -14px;
font-size: 14px;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
white-space: nowrap;
}
.quantity-category {
font-size: 11px;
color: hsl(0, 0%, 47%);
transform: translateX(19px);
}
.category-btn {
color: hsl(353, 100%, 78%);
font-size: 0.78rem;
font-weight: 600;
font-family: 'Poppins', Arial, Helvetica, sans-serif;
text-decoration: none;
}
<!-- language: lang-html -->
<div class="category">
<div class="category-container">
<div class="category-items-box">
<div class="category-item">
<div class="category-img">
<img class="image" src="https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/dress.svg" alt="foto de um vestido">
</div>
<div class="category-texts">
<div class="category-content">
<h3 class="title-category">VESTIDO & ROUPA</h3>
<p class="quantity-category">(53)</p>
</div>
<a href="#" class="category-btn">Mostrar Tudo</a>
</div>
</div>
<div class="category-item">
<div class="category-img">
<img src="https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/glasses.svg" alt="foto de um óculus">
</div>
<div class="category-texts">
<div class="category-content">
<h3 class="title-category">ÓCULOS & LENTES</h3>
<p class="quantity-category">(22)</p>
</div>
<a href="#" class="category-btn">Mostrar Tudo</a>
</div>
</div>
<div class="category-item">
<div class="category-img">
<img src="https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/shorts.svg" alt="foto de uma calça jeans">
</div>
<div class="category-texts">
<div class="category-content">
<h3 class="title-category">SHORTS & JEANS</h3>
<p class="quantity-category">(64)</p>
</div>
<a href="#" class="category-btn">Mostrar Tudo</a>
</div>
</div>
<div class="category-item">
<div class="category-img">
<img src="https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/tee.svg" alt="camisa">
</div>
<div class="category-texts">
<div class="category-content">
<h3 class="title-category">CAMISAS</h3>
<p class="quantity-category">(10)</p>
</div>
<a href="#" class="category-btn">Mostrar Tudo</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 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 -->
.category-items-box {
padding: 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 300px));
gap: 34px;
}
.category-item {
display: flex;
padding: 12px 21px;
border-radius: 9px;
border: 1px solid hsl(0, 0%, 85%);
gap: 10px;
}
.category-texts{ flex-basis:100% }
.category-img {
background-color: var(--cultured);
border: 1px solid hsl(0, 0%, 80%);
border-radius: 9px;
padding: 10px;
width: 30px;
height: 30px;
flex-shrink:0;
}
.category-content {
display: flex;
justify-content: space-between;
gap:19px;
}
.title-category {
margin-top: 8px;
margin-bottom: -14px;
font-size: 14px;
font-family: "Poppins", Arial, Helvetica, sans-serif;
white-space: nowrap;
}
.quantity-category {
font-size: 11px;
color: hsl(0, 0%, 47%);
}
.category-btn {
color: hsl(353, 100%, 78%);
font-size: 0.78rem;
font-weight: 600;
font-family: "Poppins", Arial, Helvetica, sans-serif;
text-decoration: none;
}
<!-- language: lang-html -->
<div class="category">
<div class="category-container">
<div class="category-items-box">
<div class="category-item">
<div class="category-img">
<img class="image" src="https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/dress.svg" alt="foto de um vestido">
</div>
<div class="category-texts">
<div class="category-content">
<h3 class="title-category">VESTIDO & ROUPA</h3>
<p class="quantity-category">(53)</p>
</div>
<a href="#" class="category-btn">Mostrar Tudo</a>
</div>
</div>
<div class="category-item">
<div class="category-img">
<img src="https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/glasses.svg" alt="foto de um óculus">
</div>
<div class="category-texts">
<div class="category-content">
<h3 class="title-category">ÓCULOS & LENTES</h3>
<p class="quantity-category">(22)</p>
</div>
<a href="#" class="category-btn">Mostrar Tudo</a>
</div>
</div>
<div class="category-item">
<div class="category-img">
<img src="https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/shorts.svg" alt="foto de uma calça jeans">
</div>
<div class="category-texts">
<div class="category-content">
<h3 class="title-category">SHORTS & JEANS</h3>
<p class="quantity-category">(64)</p>
</div>
<a href="#" class="category-btn">Mostrar Tudo</a>
</div>
</div>
<div class="category-item">
<div class="category-img">
<img src="https://codewithsadee.github.io/anon-ecommerce-website/assets/images/icons/tee.svg" alt="camisa">
</div>
<div class="category-texts">
<div class="category-content">
<h3 class="title-category">CAMISAS</h3>
<p class="quantity-category">(10)</p>
</div>
<a href="#" class="category-btn">Mostrar Tudo</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论