我最近在制作一个 React JS 应用程序,我发现了一个让我烦恼的 CSS 问题。这有点难以解释。
在下面的链接中是图片,在那里您可以看到有时“添加到购物车”按钮在某些卡片中高于容器框的底部,然后在其他卡片中正确地在基线上。购买按钮和价格文本也是如此。我想尝试使这一切变得均匀,以便所有框彼此均匀对齐。
这是我的卡片 CSS 代码,名为 products.css
:
.wrapper {
margin: 0 auto;
width: 90%;
}
.cards {
list-style: none;
margin: 0;
padding: 0px;
}
.cards li {
border: 2px solid #ffb485;
border-radius: 5px;
background-color: #e8e8e8;
color: #fff;
flex: 1 1 200px;
}
.price-colour {
color: black;
}
.cards h2 {
background-color: #ffb485;
margin: 0;
padding: 10px;
}
.cards p {
padding: 10px;
}
.flex {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.flex li {
flex: 1 1 200px;
margin: 10px;
}
如果您需要更多信息,或者如果我的问题措辞不当,请告诉我。很感谢任何形式的帮助。谢谢!
答案 0 :(得分:0)
如果使偶数是指使“购买”按钮、价格标签和“购物车”按钮与卡片底部对齐,则可以通过向这些子项中的第一个添加 css 边距属性来实现。< /p>
一个通用的例子:
<div class="col">
<div class="top-child">
Aligned to top
</div>
<div class="bottom-child">
Aligned to bottom
</div>
<div class="bottom-child">
Aligned to bottom
</div>
</div>
.col {
display: flex;
flex-direction: column;
height: 300px;
}
.bottom-child.first {
margin-top: auto; /* magic happens here*/
}
这样做的作用是,它使第一个“底部子元素”拥有顶部的所有可用边距,以便它一直到达父 div 的底部,直到它不能再进一步。之后的兄弟(因此第二个 .bottom-child)将与第一个一起拖到底部,因此现在两者都将与底部对齐。
答案 1 :(得分:0)
如果您使用更多的 display: flex;
,您可以说服标题部分在顶部,项目的其余部分在底部,如下所示:
body {
font-family: 'Segoe UI', sans-serif;
}
.wrapper {
margin: 0 auto;
width: 90%;
}
.cards {
list-style: none;
margin: 0;
padding: 0px;
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}
.card {
flex: 1 1 200px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 10px;
border: 2px solid #ffb485;
border-radius: 5px;
background-color: #e8e8e8;
color: #fff;
text-align: center;
}
.cardTitle {
display: flex;
align-items: center;
}
.cardTitle h2 {
background-color: #ffb485;
font-weight: 500;
/*height: 2.4em;*/
margin: 0;
padding: 2px 0 18px 0;
text-align: center;
width: 100%;
}
.cardBody {
display: flex;
align-items: center;
justify-content: flex-end;
flex-direction: column;
margin-top: 16px;
width: 100%;
}
.cardBody div > * {
margin: 0;
padding: 12px;
}
.cardBody .price {
color: black;
}
.cardBody .price h4 {
font-weight: normal;
}
.buy-product button {
background-color: #ffb485;
border: none;
border-radius: 4px;
font-size: 1.1rem;
padding: 8px 16px;
text-transform: uppercase;
}
.cart-container {
background-color: #ffb485;
color: black;
padding: 8px 0 8px 0;
width: 100%;
}
<body class="wrapper">
<div class="products">
<ul class="cards">
<li class="card">
<div class="cardTitle">
<h2>Apple</h2>
</div>
<div class="cardBody">
<div class="buy-product">
<button>Buy</button>
</div>
<div class="price">
<h4>€9.99</h4>
</div>
<div class="cart-container">
<div class="product-icon">
<a class="cart">?+</a>
</div>
</div>
</div>
</li>
<li class="card">
<div class="cardTitle">
<h2>Banana</h2>
</div>
<div class="cardBody">
<div class="buy-product">
<button>Buy</button>
</div>
<div class="price">
<h4>€8.99</h4>
</div>
<div class="cart-container">
<div class="product-icon">
<a class="cart">?+</a>
</div>
</div>
</div>
</li>
<li class="card">
<div class="cardTitle">
<h2>Cantaloupe</h2>
</div>
<div class="cardBody">
<div class="buy-product">
<button>Buy</button>
</div>
<div class="price">
<h4>€11.99</h4>
</div>
<div class="cart-container">
<div class="product-icon">
<a class="cart">?+</a>
</div>
</div>
</div>
</li>
<li class="card">
<div class="cardTitle">
<h2>Pourouma cecropiaefoli</h2>
</div>
<div class="cardBody">
<div class="buy-product">
<button>Buy</button>
</div>
<div class="price">
<h4>€11.99</h4>
</div>
<div class="cart-container">
<div class="product-icon">
<a class="cart">?+</a>
</div>
</div>
</div>
</li>
<li class="card">
<div class="cardTitle">
<h2>The fruits of our labour</h2>
</div>
<div class="cardBody">
<div class="buy-product">
<button>Buy</button>
</div>
<div class="price">
<h4>Priceless</h4>
</div>
<div class="cart-container">
<div class="product-icon">
<a class="cart">?+</a>
</div>
</div>
</div>
</li>
<li class="card">
<div class="cardTitle">
<h2>Where The Fruits Have No Name</h2>
</div>
<div class="cardBody">
<div class="buy-product">
<button>Buy</button>
</div>
<div class="price">
<h4>€99.99</h4>
</div>
<div class="cart-container">
<div class="product-icon">
<a class="cart">?+</a>
</div>
</div>
</div>
</li>
<li class="card">
<div class="cardTitle">
<h2>More than one of these things is not like the others</h2>
</div>
<div class="cardBody">
<div class="buy-product">
<button>Buy</button>
</div>
<div class="price">
<h4>€11.99</h4>
</div>
<div class="cart-container">
<div class="product-icon">
<a class="cart">?+</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>