0
我正在爲一些朋友之間的項目做前端開發。展示產品內聯 - 需要特殊ID？
他正在構建支持導軌，並有模板，將生成的產品，並把內容，但我遇到的情況，我不知道如何使他們正確對齊？
這是一個基於網絡的平臺。
以下是產品的情況。我有三個例子。我創建了一個容納它們的產品容器。我有第一個完美顯示，然後當我複製粘貼另外兩個（只是爲了看到他們），他們不產生。
<div class="main-bkg">
<div class="card-row">
<div class="product-cont">
<div class="product-holder">
<div class="product-img"> <img src="img/box.jpg"> </div>
<div class="product-name">prod1</div>
<div class="product-info">
<div class="product-price">$99</div>
<div class="sep">-</div>
<div class="product-desc">box</div>
</div>
<div class="product-qty">
<div class="qty-sub">-</div>
<div class="qty-amount">1</div>
<div class="qty-add">+</div>
</div>
</div>
</div>
<div class="product-cont">
<div class="product-holder">
<div class="product-img"> <img src="img/circle.jpg"> </div>
<div class="product-name">prod2</div>
<div class="product-info">
<div class="product-price">$99</div>
<div class="sep">-</div>
<div class="product-desc">circle</div>
</div>
<div class="product-qty">
<div class="qty-sub">-</div>
<div class="qty-amount">1</div>
<div class="qty-add">+</div>
</div>
</div>
</div>
<div class="product-cont">
<div class="product-holder">
<div class="product-img"> <img src="img/tri.jpg"> </div>
<div class="product-name">prod3</div>
<div class="product-info">
<div class="product-price">$99</div>
<div class="sep">-</div>
<div class="product-desc">triangle</div>
</div>
<div class="product-qty">
<div class="qty-sub">-</div>
<div class="qty-amount">1</div>
<div class="qty-add">+</div>
</div>
</div>
</div>
</div>
</div>
該CSS是建立在SASS，我會張貼在那容易閱讀。如果你想要的CSS導出我可以顯示它。
我假設它們重疊。我並不完全確定圍繞這個人的簡單工作，然後給每個產品一個特殊的ID，然後將樣式應用到它。
.main-bkg {
padding-top: 165px;
height: 100vh;
background-color: #ebf0f1;
.card-row {
padding-top: 15px;
padding-bottom: 15px;
.product-cont {
padding-left: 30px;
padding-right: 30px;
.product-holder {
background-color: white;
height: 350px;
width: 200px;
border-radius: 20x;
.product-img {
img {
display: block;
height: 240px;
width: 170px;
margin-left: auto;
margin-right: auto;
padding-top: 15px;
}
}
.product-name {
text-align: center;
}
.product-info {
display: block;
height: 30px;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
font-weight: 700;
.product-price {
display: inline-block;
text-align: center;
float: left;
}
.sep {
display: inline-block;
text-align: center;
}
.product-desc {
display: inline-block;
text-align: center;
float: right;
}
}
.product-qty {
display: block;
border-radius: 3px;
border: 1px solid $prime-color;
margin-left: auto;
margin-right: auto;
width: 100px;
.qty-sub {
color: $prime-color;
display: inline-block;
float: left;
width: 30px;
height: 25px;
text-align: center;
}
.qty-amount {
display: inline-block;
color: $prime-color;
font-size: 20px;
text-align: center;
width: 40px;
height: 25px;
}
.qty-add {
color: $prime-color;
display: inline-block;
text-align: center;
float: right;
width: 30px;
height: 25px;
}
}
}
}
}
}
你確定你的頁面與您最新的HTML更新？從你發佈的內容看，它看起來不會有任何事情導致它們重疊。 –
哦，對不起，是的，它們彼此對齊。謝謝。 –
你想讓它們相互顯示？ –